vue整合pdfjs,實現pdf檔案預覽
阿新 • • 發佈:2021-12-09
背景
專案上要求實現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': ''} }, }
連結:https://www.jianshu.com/p/b48af7917656