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;
       });
    });
},

 

posted @ 2022-03-11 15:16  奔跑吧前端(李钊)  阅读(3306)  评论(0编辑  收藏  举报