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

问题描述

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

array([False,True,False,False])

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

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

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

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;

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

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

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

解决方法

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

,

你可以为 webpack 安装 worker loader 模块：

npm install worker-loader --save-dev

然后在您要与工作人员一起工作的地方使用它：

import SomeWorker from 'worker-loader?inline=true!../workers/some.worker'

const someWorker: Worker = new SomeWorker()

someWorker.postMessage(...)

我还没有用 react-pdf 尝试过这个解决方案，但它可能会有所帮助。

如果你正在使用 TypeScript，你可能需要为它添加类型：

declare module 'worker-loader*' {
  class SomeWorker extends Worker {
    constructor()
  }

  export default SomeWorker
}

只是将其添加到您项目的某个 .d.ts 文件中。

,

安装 pdfjs-dist 然后使用 webpack 模块：

import { pdfjs } from 'react-pdf'
import worker from 'pdfjs-dist/webpack'

pdfjs.GlobalWorkerOptions.workerSrc = worker

,

如果您的构建过程使用 cli 命令（即 AWS 构建规范），您可以使用：

mkdir -p build && cp ./node_modules/pdfjs-dist/build/pdf.worker.js build

,

找到了一种更有效的方式来包含工人 通过包含 react-pdf 本身的依赖项中的库，这样您将永远不会遇到这样的版本不匹配 API 版本“2.3.45”与 Worker 版本“2.1.266”不匹配

如果您手动安装 pdfjs-dist，则必须在每次构建时检查 react pdf 依赖版本

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

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

在 pdfjs 库上看到类似的错误：https://github.com/mozilla/pdf.js/issues/10997

希望对大家有所帮助