创建反应应用程序-如何将pdf.worker.js文件从pdfjs-dist/build复制到项目的输出文件夹？

由于我无法在将要使用该应用程序的网络中使用浏览器的 pdf 查看器，因此我正在测试用于使用 React 加载 PDF 的react-pdf包。我制作了一个组件，用于发送从后端获取的 PDF 网址：

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

const PDFViewer = ({url}) => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }
 function onLoadError(error) {
   console.log(error);
 }

 function onSourceError(error) {
   console.log(error);
 }

  return (
    <div>
      <Document
        file={window.location.origin + url}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={onLoadError}
        onSourceError={onSourceError}
      >
        {[...Array(numPages).keys()].map((p) => (
          <Page pageNumber={p + 1} />
        ))}
      </Document>
    </div>
  );
};

export default PDFViewer;

但是，在打开 PDFViewer 时出现错误

错误：设置假工人失败：“无法读取未定义的属性‘WorkerMessageHandler’”

在文档中，它说您应该设置 Service Worker，并且推荐的方法是使用 CDN 来做到这一点：

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

但是，我不能在我的项目中使用 CDN 链接，并且在文档中它还说：

Create React App 在底层使用 Webpack，但 Webpack 的说明不起作用。适用标准说明。标准（Browserify 和其他） 如果您使用 Browserify 或其他捆绑工具，则必须自行确保将 pdfjs-dist/build 中的 pdf.worker.js 文件复制到项目的输出文件夹中。

没有关于如何使用 create-react-app 执行此操作的说明。那我如何在本地设置它呢？

回答

import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;