React pdf js - 警告：设置假工人

Question

我正在使用 react pdf 查看器，我想在本地设置工作人员。我尝试过这样做：

import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

<Worker workerUrl={pdfjsWorker}>
    <Viewer
      fileUrl={url}
      defaultScale={SpecialZoomLevel.PageFit}
      plugins={[
        defaultLayoutPluginInstance
      ]}
    />
  </Worker>

但是，这会引发警告：

警告：设置假工人

那么导入工人的正确方法是什么，为什么我会收到此警告？

Answer 1

我遇到了类似的问题，通过添加 pdf.worker.js 解决了它们

Git 参考

我在worker.js的头部添加了js文件，即https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.js

然后我根据控制台错误更正版本（2.10.377 到 2.3.200），并开始加载 pdf

Answer 2

就我而言，不要像这样编写代码：

<script src="/js/pdf.worker.min.js"></script>
<script src="/js/pdf.min.js"></script>

我写的是：

<!--script src="/js/pdf.worker.min.js"></script--> // removed
<script src="/js/pdf.min.js"></script>

$(function() {
  pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.min.js';    
});

这使得警告消失了...... 即使我的 PDF 无论如何都已渲染 - 我只是想删除该警告。

Answer 3

小心！

pdfjs版本必须相同

请像下面这样使用它

import { Worker, Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

import { pdfjs } from 'react-pdf';

const YourComponent = () => {
  return (
    <div>
      <Worker workerUrl={`https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`}>
        <Viewer fileUrl={fileUrl} />
      </Worker>
    </div>
  )
};

Answer 4

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.0.279/pdf.worker.min.js'

在导入

pdfjs-dist

后添加此内容并尝试根据控制台错误匹配版本（此处为 3.0.279）。这对我有用。

Answer 5

Worker 组件需要一个

workerUrl

，其类型为

string

。您可能需要将代码中的

pdfjsWorker

替换为实际的 pdf-worker url。

const pdfVersion = "2.6.347"
const pdfWorkerUrl = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfVersion}/pdf.worker.js`
<Worker workerUrl={pdfWorkerUrl}>
    <Viewer
      fileUrl={url}
      defaultScale={SpecialZoomLevel.PageFit}
      plugins={[
        defaultLayoutPluginInstance
      ]}
    />
</Worker>

注意： 请确保为 pdfjs-dist 和worker 设置相同的版本。

官方文档在这里提到了同样的事情：https://react-pdf-viewer.dev/docs/basic-usage/

Answer 6

我在 next.js 中编写以下代码并且它有效！

import "./index.css";

import * as PDFJS from "pdfjs-dist/build/pdf";
import * as PDFJSWorker from "pdfjs-dist/build/pdf.worker";

export default async function ReaderScreen(props: { filepath: string }) {
  PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;

  const pdf = await PDFJS.getDocument(props.filepath).promise;
  const pages = pdf["_pdfInfo"].numPages;

  return <div>Pages: {pages}</div>;
}

如果您在代码中看到以下错误：

然后，在

index.d.ts

目录下创建一个

typings

文件，并写入以下代码：

declare module "pdfjs-dist/build/pdf";
declare module "pdfjs-dist/build/pdf.worker";

现在应该可以使用了。