Vue2.0和pdfjs相互结合使用

本篇章记录：V2.0和PDF.Js相互结合使用案例摘要！！

安装：
第一步：npm install pdfjs-dist@2.2.228
第二步：npm  i path2d-polyfill      "path2d-polyfill": "^3.1.2",

根据报错依次安装(可选，不一定)
npm install --save canvas
npm i -g node-gyp
npm install canvas --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas
 引用后页面会报错：
Uncaught SyntaxError: Unexpected token '<'
vue.js:1872 Error loading PDF: Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler')".


需要在index.html下引用：
  例如：
    <script src="<%= BASE_URL %>cdn/pdfjs-dist/build/pdf.worker.min.js"></script>

下载pdfjs-dist依赖时，出现版本不兼容问题：
在vue.config.js的module.exports={
transpileDependencies: ['@jiaminghi', '@microsoft/signalr', 'pdfjs-dist'],   //此处增加pdfjs-dist   用于低版本兼容，自动解析语法错误
}



import * as pdfjsLib from 'pdfjs-dist';

 <div id="pdfViewer" v-show="Ispdf">

        </div>



  var pdfViewer = document.getElementById('pdfViewer');
      pdfjsLib.GlobalWorkerOptions.workerSrc = '../bgcode/pdfjs/pdf.worker.min.js';
       pdfjsLib.getDocument(url).promise.then(pdfDoc => {
           let renderingTasks = [];
          for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
            renderingTasks.push(pdfDoc.getPage(pageNum).then(function(page) {
              console.log(pageNum);
              console.log(page);
              // console.log(page);
              var canvas = document.createElement('canvas');
              canvas.classList.add('i_pagep')
              canvas.id = pageNum;
              var context = canvas.getContext('2d');
              var viewport = page.getViewport({
                scale: 1.5
              });

              canvas.height = viewport.height;
              canvas.width = viewport.width;

              var renderContext = {
                canvasContext: context,
                viewport: viewport
              };
              //console.log(renderContext);
              page.render(renderContext).promise
                .then(function() {
                  pdfViewer.appendChild(canvas);
                });
            }));
         }
          // 8. 等待所有渲染任务完成
          Promise.all(renderingTasks).then(() => {
            console.log('所有页面都已按顺序渲染为图片。');
          });
        // // 获取第一页
        // pdf.getPage(1).then(page => {
        //   console.log(page);
        //  // const scale = 1.5; // 缩放比例
        //  // const viewport = page.getViewport({ scale });

        //   // // 准备 canvas 使用 PDF 渲染内容
        //   // const canvas = this.$refs.pdfCanvas;
        //   // const context = canvas.getContext('2d');
        //   // canvas.height = viewport.height;
        //   // canvas.width = viewport.width;

        //   // // 渲染 PDF 页
        //   // const renderContext = {
        //   //   canvasContext: context,
        //   //   viewport: viewport,
        //   // };
        //   // page.render(renderContext);
        // });
      }).catch(error => {
         console.error('Error loading PDF:', error);
      });