如何在 Vue 中使用 Chart.js - 手把手教你搭視覺化資料圖表

npm install -g @vue/clivue create kalacloud-vue-pdfjs-viewercd kalacloud-vue-pdfjs-viewer

複製程式碼

public├── lib|    ├── build|        ├── ...|    ├── web|        ├── my-pdf-file.pdf|        ├── ...|    ├── LICENSE├── favicon.ico└── index.html

複製程式碼

<template><div>  <iframe height="100%" width=100% :src="`${getFilePath}`" ></iframe></div></template>
<script>export default {  name: 'PDFJSViewer',  props: {    fileName: String,    path:String  },  computed:{     getFilePath: function () {      if(this.fileName!==''){          return this.path +'?file=' + this.fileName      }      return this.path     }  }}</script><style scoped>div {  width: 50%;  height: 79vh;  min-width: 400px;}</style>

複製程式碼

<template>  <div id="app">    <h1>Vue 實現 PDF 檔案線上預覽 - 卡拉雲(kalacloud.com)</h1>    <PDFJSViewer :path="`${path}`" :fileName="`${name}`"/>  </div></template>

複製程式碼

<script>import PDFJSViewer from './components/PDFJSViewer'
export default {  name: 'app',  components: {    PDFJSViewer  },  data () {    return {      name: 'kalacloud-demo.pdf', // 這裡是需要預覽的 PDF 檔名      path: 'lib/web/viewer.html'     }  }}</script>

複製程式碼

<script src="customToolbar.js"></script>

複製程式碼

//建立一個新樣式let sheet = (function() {    let style = document.createElement("style");    style.appendChild(document.createTextNode(""));    document.head.appendChild(style);    return style.sheet;   })();    //調整頁面大小時，PDF 預覽元件會隱藏，開啟就會徹底隱藏所有功能變成一個純預覽工具。   //function editToolBar(){    //removeGrowRules();
    //將功能按鈕放在工具欄左側    addElemFromSecondaryToPrimary('pageRotateCcw', 'toolbarViewerLeft')    addElemFromSecondaryToPrimary('pageRotateCw', 'toolbarViewerLeft')    addElemFromSecondaryToPrimary('zoomIn', 'toolbarViewerLeft')    addElemFromSecondaryToPrimary('zoomOut', 'toolbarViewerLeft')
     //將功能按鈕放在工具欄中間    addElemFromSecondaryToPrimary('previous', 'toolbarViewerMiddle')    addElemFromSecondaryToPrimary('pageNumber', 'toolbarViewerMiddle')    addElemFromSecondaryToPrimary('numPages', 'toolbarViewerMiddle')    addElemFromSecondaryToPrimary('next', 'toolbarViewerMiddle')
    //將功能按鈕放在工具欄右側    addElemFromSecondaryToPrimary('secondaryOpenFile', 'toolbarViewerRight')
    // 更改功能按鈕的圖示    changeIcon('previous', 'icons/baseline-navigate_before-24px.svg')    changeIcon('next', 'icons/baseline-navigate_next-24px.svg')    changeIcon('pageRotateCcw', 'icons/baseline-rotate_left-24px.svg')    changeIcon('pageRotateCw', 'icons/baseline-rotate_right-24px.svg')    changeIcon('viewFind', 'icons/baseline-search-24px.svg');    changeIcon('zoomOut', 'icons/baseline-zoom_out-24px.svg')    changeIcon('zoomIn', 'icons/baseline-zoom_in-24px.svg')    changeIcon('sidebarToggle', 'icons/baseline-toc-24px.svg')    changeIcon('secondaryOpenFile', './icons/baseline-open_in_browser-24px.svg')
    // 隱藏某些功能    removeElement('secondaryToolbarToggle')    removeElement('scaleSelectContainer')    removeElement('presentationMode')    removeElement('openFile')    removeElement('print')    removeElement('download')    removeElement('viewBookmark')   }   function changeIcon(elemID, iconUrl){    let element = document.getElementById(elemID);    let classNames = element.className;    classNames = elemID.includes('Toggle')? 'toolbarButton#'+elemID :   classNames.split(' ').join('.');    classNames = elemID.includes('view')? '#'+elemID+'.toolbarButton' : '.'+classNames    classNames+= "::before";    addCSSRule(sheet, classNames, `content: url(${iconUrl}) !important`, 0)   }   function addElemFromSecondaryToPrimary(elemID, parentID){    let element = document.getElementById(elemID);    let parent = document.getElementById(parentID);    element.style.minWidth = "0px";    element.innerHTML =''    parent.append(element);   }   function removeElement(elemID){    let element = document.getElementById(elemID);    element.parentNode.removeChild(element);   }   function removeGrowRules(){    addCSSRule(sheet, '.hiddenSmallView *', 'display:block !important');    addCSSRule(sheet, '.hiddenMediumView', 'display:block !important');    addCSSRule(sheet, '.hiddenLargeView', 'display:block !important');    addCSSRule(sheet, '.visibleSmallView', 'display:block !important');    addCSSRule(sheet, '.visibleMediumView', 'display:block !important');    addCSSRule(sheet, '.visibleLargeView', 'display:block !important');   }   function addCSSRule(sheet, selector, rules, index) {    if("insertRule" in sheet) {    sheet.insertRule(selector + "{" + rules + "}", index);    }    else if("addRule" in sheet) {    sheet.addRule(selector, rules, index);    }   }   window.onload = editToolBar

複製程式碼