Vue3中使用pdf.js实现在线预览pdf文件流

以下是在Vue中使用pdf.js实现在线预览pdf文件流的步骤：

1.在系统中安装pdf.js

下载pdf.js包

2.在页面中引入pdf.js

import pdf from "@/assets/pdf/build/pdf";

3.加载pdf文件流

  var loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  axios
    .get(apiUrl, { responseType: "blob" })
    .then((res) => {
      if (res.status == 200) {
        const blob = new Blob([res.data], { type: "application/pdf" });
        const url = URL.createObjectURL(blob);
        getPdf(1, url);
        loading.close();
      } else {
        loading.close();
      }
    });

4. 渲染pdf

function getPdf(pageNum, url) {
       let pdfjsLib = pdf;//页面中import引用的
      pdfjsLib.PDFJS.workerSrc = "./js/pdf/build/pdf.worker.js";
      let loadingTask = pdfjsLib.getDocument(url);
      loadingTask.promise.then(
        (pdf) => {
        //...
        })
 }