• 版本声明：

vue@3.2.1

pdfjs-dist@2.5.207 

ps：如果使用 vue 3.x 的版本，切记不要使用太高的 pdfjs-dist 版本，会有语法报错

• 函数引入：

  import * as PDFJS from 'pdfjs-dist';
  if (!PDFJS.GlobalWorkerOptions.workerSrc) {
    // 此处的 pdf work 文件放置到了 根目录/public/js/pdfjs 下
    PDFJS.GlobalWorkerOptions.workerSrc = 'js/pdfjs/pdf.worker.js';
  }

ps：public/js/pdfjs 下的文件是从 pdfjs-dist 的npm包的build文件下的文件复制的

• 使用代码：

<!-- 用来装填pdfjs生成的canvas -->
<div id="pdfContainerRef"></div>

// setup 函数中需要定义的变量
// pdf附件的url地址
const url = ref();
// 此loading变量用来判断页面加载动画的显隐
// 如不需要可以不定义，下面的方法中也可以注释掉该loading变量的变更
const loading = ref(false); 

// 记得引入nextTick，此方法需要在 url 已经存在正确的pdf路径后再调用执行
const handleInitPdf = () => {
        nextTick(() => {
          // 初始化在线预览pdf
          PDFJS.getDocument(url.value).promise.then((pdfDoc_) => {
            for (let i = 1; i <= pdfDoc_.numPages; i++) {
              // Using promise to fetch the page
              pdfDoc_.getPage(i).then((page) => {
                // 用来计算页面宽度以变更缩放比例
                var desiredWidth = document.body.clientWidth || document.body.offsetWidth || document.body.scrollWidth;
                var viewport = page.getViewport({ scale: 1 });
                var scaledViewport = page.getViewport({ scale: desiredWidth / viewport.width });
                // 创建canvas元素并绘制内容
                const canvas = document.createElement('canvas');
                canvas.setAttribute('id', `canvasId${i}`);
                const context = canvas.getContext('2d');
                canvas.height = scaledViewport.height;
                canvas.width = scaledViewport.width;
                // 在canvas画布上绘制pdf
                const renderContext = {
                  canvasContext: context,
                  viewport: scaledViewport,
                };
                const renderTask = page.render(renderContext);

                document.getElementById('pdfContainerRef').appendChild(canvas);
                // 渲染完成执行
                renderTask.promise.then(() => {
                  loading.value = false;
                });
              });
            }
          });
        });
      };

•  出现的问题记录：

1. 版本兼容问题
2. pdf work 路径问题
3. getViewport 配置传参在不同的版本中使用上存在差异