创建react如何将pdf.worker.js文件从pdfjs/build复制到项目的输出文件夹？
由于我不能使用浏览器的pdf查看器在网络中，该应用程序将被使用，我正在测试一个react pdf包，以加载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‘”
在文档中，它指出您应该设置服务工作者，推荐的方法是使用CDN：
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;但是，我不能为我的项目使用CDN链接，在文档中它还说：
创建反应应用程序使用Webpack在引擎盖下，但Webpack的指示将不起作用。适用标准说明。标准(Browserify等)如果使用Browserify或其他捆绑工具，必须确保将pdfjs/build中的pdf.worker.js文件复制到项目的输出文件夹中。
没有关于如何使用创建-反应-应用程序的说明。那么我如何在本地设置这个呢？
回答 7
Stack Overflow用户
发布于 2021-01-18 18:58:12
安装pdfjs-dist
import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;Stack Overflow用户
发布于 2021-06-17 14:01:45
通过从react本身的依赖项中包含库，找到了一种更有效的方法，通过这种方式您永远不会得到像这个那样的版本不匹配API版本"2.3.45“不匹配工作版本"2.1.266"
如果手动安装pdfjs-dist，则必须检查每个构建上的react依赖项版本。
import { Document, Page, 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
希望它能帮助人们
Stack Overflow用户
发布于 2021-01-18 18:47:27
您可以为webpack安装工人装载机模块：
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文件中。
https://stackoverflow.com/questions/65740268
复制相似问题
腾讯云开发者
