首先安装插件:npm install pdfjs-dist --save。
在页面中引入:
import PDFJS from 'pdfjs-dist';
添加canvas标签:
<canvas v-for="page in pdfPages" :id="'the-canvas' + page" :key="page"></canvas>
设置pdf的url地址,这里的地址是放到浏览器的地址栏里可以下载的:
let pdfUrl = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf';
data里写入必要的变量:
data () { return { pdfDoc: null, pdfPages: null } }
获取pdf文件方法:
loadPdf () { PDFJS.getDocument(pdfUrl).promise.then((pdf) => { console.log('------------------', pdf); this.pdfDoc = pdf; this.pdfPages = this.pdfDoc.numPages; this.$nextTick(() => { this.renderPdfPage(1); }); }); }
绘制pdf页面:
renderPdfPage(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.pdfPages > num) { this.renderPdfPage(num + 1); } }); },
下面为完整代码:
<template> <div> <canvas v-for="page in pdfPages" :id="'the-canvas' + page" :key="page"></canvas> </div> </template> <script> import PDFJS from 'pdfjs-dist'; let pdfUrl = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf'; export default { data () { return { pdfDoc: null, pdfPages: null } }, created () { this.loadPdf(); }, methods: { loadPdf () { PDFJS.getDocument(pdfUrl).promise.then((pdf) => { console.log('------------------', pdf); this.pdfDoc = pdf; this.pdfPages = this.pdfDoc.numPages; this.$nextTick(() => { this.renderPdfPage(1); }); }); }, renderPdfPage(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.pdfPages > num) { this.renderPdfPage(num + 1); } }); }, } } </script>