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

Question

由于我无法在将要使用该应用程序的网络中使用浏览器的 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 时出现错误

Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined"

在文档中，它说您应该设置 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 执行此操作的说明。那我如何在本地设置它呢？

Answer 1

安装 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