1.首先2.8.335版本之前引入方式
import pdfJS from "pdfjs-dist"; import workerSrc from 'pdfjs-dist/build/pdf.worker.entry' pdfJS.workerSrc = workerSrc; //或者使用 import pdfJS from 'pdfjs-dist/es5/build/pdf.js'
2. 2.8.335版本之后引入方式
// 注意導入的寫法 import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' PdfJs.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
3使用
// 初始化pdf initPdf() { PdfJs.getDocument(this.pdf.url).promise.then((pdfDoc_) => { this.isLoading = false; // 返回pdf實例 getDocument this.pdf.doc = pdfDoc_; // 返回總頁數 this.pdf.page.total = this.pdf.doc.numPages; this.pdf.page.pageNum = 1; //處理服務端返回數據 this.processingData() //渲染pdf this.renderPage(); }).catch((err) => { console.log(err); this.$message.warning('未知錯誤,需要刷新頁面') // 獲取企業合同詳情 this.findList() }); }, // 渲染pdf renderPage() { //正在渲染 this.pdf.isRendering = true; let canvas = this.$refs.pdfCanvas; this.pdf.doc.getPage(this.pdf.page.pageNum).then((page) => { // 返回頁面內容(比例) page.getViewport(scale) var viewport = page.getViewport({ scale: this.pdf.scale }); canvas.height = viewport.height; //返回內容高度 canvas.width = viewport.width; //返回內容寬度 let ctx = canvas.getContext("2d") var renderContext = { canvasContext: ctx, //畫布 viewport: viewport, //內容 }; // 頁面呈現({畫布,內容}) page.render(renderContext); var renderTask = page.render(renderContext); renderTask.promise.then(() => { //預渲染電子印章 that.renderFabric() this.pdf.isRendering = false; }); }); },