vue整合pdfjs，實現pdf檔案預覽

更多內容關注公眾號：SAP Technical 

背景

專案上要求實現pdf檔案格式的預覽。

分析

pdf格式的檔案瀏覽器是可以直接開啟的。所以只需要返回pdf檔案的檔案流，就可以直接預覽檔案，通過這種方式開啟，整個頁面全是pdf的檔案內容。需求是要求預覽時，頁面上要加上特定的標題格式，所以直接把檔案流在瀏覽器開啟的方式行不通。通過收集相關資料，找到pdfjs外掛以支援檔案的預覽。

實現

1.vue中引入pdfjs依賴

npm install pdfjs-dist --save

2.使用canvas當預覽pdf檔案的畫布

<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>

3.呼叫pdfjs api進行文件渲染

_renderPage (num) {
     this.pdfDoc.getPage(num).then((page) => {
       let canvas = document.getElementById('the-canvas' + num)
      let ctx = canvas.getContext('2d')
       let dpr = window.devicePixelRatio || 1
       let bsr = ctx.webkitBackingStorePixelRatio ||
         ctx.mozBackingStorePixelRatio ||
         ctx.msBackingStorePixelRatio ||
         ctx.oBackingStorePixelRatio ||
         ctx.backingStorePixelRatio || 1
       let ratio = dpr / bsr
       let viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
       canvas.width = viewport.width * ratio
       canvas.height = viewport.height * ratio
       canvas.style.width = viewport.width + 'px'
       canvas.style.height = viewport.height + 'px'
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
       let renderContext = {
         canvasContext: ctx,
         viewport: viewport
       }
       page.render(renderContext)
       if (this.pages > num) {
         this._renderPage(num + 1)
       }
     })
   },
   _loadFile (url) {
     PDFJS.getDocument(url).then((pdf) => {
       this.pdfDoc = pdf
       console.log(pdf)
       this.pages = this.pdfDoc.numPages
       this.$nextTick(() => {
         this._renderPage(1)
       })
     })
   }

4.使用時傳遞url

this._loadFile('/data/ystest/test')

5.反向代理，解決跨域

proxyTable: {
     '/data': {
       target: 'http://127.0.0.1:8081',
       pathRewrite: {'^/data': ''}
     },
   }

效果演示

原始檔案.png

 

pc端效果1.png

 

pc端效果2.png

 

手機ipone.png

 

手機ipone2.png