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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM