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

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

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 执行此操作的说明。那么我该如何在本地进行设置呢？

Install pdfjs-dist

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

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

参考：https://github.com/mozilla/pdf.js/issues/8305 https://github.com/mozilla/pdf.js/issues/8305