vue3.2版本中使用pdfjs-dist与坑点

安装

npm install pdfjs-dist --save

我的pdfjs-dist版本为:

"pdfjs-dist": "^2.13.216"

html

          <div
            class="pdf_class"
          >
            <canvas
              ref="myCanvas"
              class="pdf-container"
            >
            </canvas>
            <div class="btn_page">
              <button
                @click="prePage"
                class="one"
              >Prev</button>
              <span>{{curPage}}/{{pdfEnd}}</span>
              <button
                @click="nextPage"
                class="two"
              >Next</button>
            </div>
          </div>

将下面链接复制到index.html中

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>

JavaScript

<script setup>
// 导入pdf
const pdfJS = window["pdfjs-dist/build/pdf"];
import { ref } import 'vue';
const pdfEnd = ref(0); // 尾页码
const myCanvas = ref(null); // 拿到pdf dom
let pdfObj = null; // 用于保存pdf实例
const curPage = ref(1); // 当前页
const getPage = (pdf, pageNumber) => {  // 参数为pdf实例, 当前页码
  if (pageNumber <= 0) {
    console.log("页数超过");
    curPage.value = 1;
  } else if (pageNumber > pdf.numPages) {
    curPage.value = pdf.numPages;
  } else {
    // 在不超出&低于总页数的情况下执行
    pdf.getPage(pageNumber).then((page) => {
      let canvas = toRaw(myCanvas.value);
      let viewport = page.getViewport({ scale: 1 });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      let ctx = canvas.getContext("2d");
      let renderContext = {
        canvasContext: ctx,
        viewport: viewport,
      };
      // 显示pdf
      page.render(renderContext).promise.then(() => {
        console.log("显示");
      });
    });
  }
};

// 初始化 pdf
const previewPDF = (url) => { // 参数为pdf链接
  let loadingTask = pdfJS.getDocument(url);
  loadingTask.promise.then((pdf) => {
    pdfObj = pdf; // 保存pdf整体实例
    pdfEnd.value = pdf.numPages;
    getPage(pdf, curPage.value);
  });
};

// 上一页
const prePage = () => {
  curPage.value--;
  getPage(pdfObj, curPage.value); // 重新执行
};

// 下一页
const nextPage = () => {
  curPage.value++;
  getPage(pdfObj, curPage.value);  // 重新执行
};

previewPDF('pdf链接'); // 进入页面执行
</script>

坑点

按道理来说, 可以通过以下方式进行导入

import * as pdfJS from "pdfjs-dist";
import * as worker from "pdfjs-dist/build/pdf.worker";
pdfJS.GlobalWorkerOptions.workerSrc = worker;

而我用了却一直抛出错误, 让我很疑惑, 迫不得已只能选择使用cdn, 这也不是长久之计, 因为我认为使用cdn会让我的项目不够稳定, 求路过的大佬看看这个问题有完美的解决方案么, 跪求, 在此感谢!!!