Mozilla PDF - 如何在反应应用程序中从 url 查看 PDF？

Question

我遵循了一个关于如何使用 React 实现 Mozilla 的 PDF 查看器的快速教程。我在这里做了一个密码箱。我想知道这是否可以通过导入 pdfjs 的节点模块来实现。因此，不要将包下载到公共文件夹中以将其与导入一起使用：

export default class PDFJs {
  init = (source, element) => {
    const iframe = document.createElement("iframe");

    iframe.src = `/pdfjs-2.5.207-dist/web/viewer.html?file=${source}`;
    iframe.width = "100%";
    iframe.height = "100%";

    element.appendChild(iframe);
  };
}

此外，当 PDF 的源是 URL 时，这种设置不起作用。如果我这样做，我会收到一个错误：

PDF.js v2.5.207（内部版本：0974d6052）消息：文件来源与查看者的来源不匹配

我已经注释掉了在pdfjs-2.5.207-dist/web/viewer.js 中检查文件来源的代码部分：

  //if (origin !== viewerOrigin && protocol !== "blob:") {
  //  throw new Error("file origin does not match viewer's");
  //} 

但是，然后我得到了一个错误：

PDF.js v2.5.207（内部版本：0974d6052）消息：无法获取

我怎样才能解决这个问题？是否可以将这个包像模块一样导入到 react 组件中，我如何将它用于带有 URL 的外部资源的 PDF？

Answer 1

我对你的示例进行了更改，以便它接受 URL

我的代码如下

import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
const pdfjsLib = import("pdfjs-dist/build/pdf");

export default class PDFJs {
  init = (source, element) => {
    pdfjsLib.then((pdfjs) => {
      pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
      var loadingTask = pdfjs.getDocument(`${source}`);
      loadingTask.promise.then((pdf) => {
        pdf.getPage(1).then((page) => {
          var scale = 1.5;
          var viewport = page.getViewport({ scale: scale });
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          element.appendChild(canvas);
          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext);
        });
      });
    });
  };
}

你可以在这里看到结果