pdfjs使用

它会有顶层依赖等问题，装好后需要去找一些办法解决，这里就不管这些问题

pdf太多一次性导入ios会页面崩溃，安卓无所吊谓（ios真乐色）

//引入相关样式
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs'
import * as pdfjsLib from "pdfjs-dist/build/pdf";
let pdfPages = ref(0); // pdf文件的页数
let pdfScale = ref(0.67); // 缩放比例
let pdfDoc = reactive({}); // 保存加载的pdf文件流
const loadFile = async (url) => {
  pdfjsLib.GlobalWorkerOptions.workerSrc =pdfjsWorker
  const loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then((pdf) => {
    pdfDoc = pdf;                 //获取pdf文档流
    pdfPages.value = pdf.numPages;//获取pdf文件的页数
    nextTick(() => {
      renderPage(1);
    });
  });
}
const renderPage = (num) => {
  pdfDoc.getPage(num).then((page) => {
    const canvasId = "pdf-canvas-" + num;
    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext("2d");
    const dpr = window.devicePixelRatio || 1;
    const bsr =
        ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio ||
        1;
    const ratio = dpr / bsr;
    const viewport = page.getViewport({ scale: pdfScale.value });
    canvas.width = viewport.width * ratio;
    canvas.height = viewport.height * ratio;
    canvas.style.width = viewport.width + "px";
    canvas.style.height = viewport.height + "px";
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
    const renderContext = {
      canvasContext: ctx,
      viewport: viewport,
    };
    page.render(renderContext);
    if (num < pdfPages.value) {
      renderPage(num + 1);
    }
  });
};

                      <canvas
                          v-for="pageIndex in pdfPages"
                          :id="`pdf-canvas-` + pageIndex"
                          :key="pageIndex"
                          style="display: block;width: 100%;margin: auto"
                      ></canvas>

这样就行了