vue引入pdfjs-dist 2.8.335版本之后报错
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; }); }); },