React + PDFViewer 与 pdfjs-dist 解决方案

Question

我希望我没有违反任何规则，但这是一个花了我很多时间才找到的解决方案，我希望它能对其他人有所帮助。

如果您正在使用

React

并想要显示 PDF，有多种方法，但我需要的方法之一要求我使用

pdfjs-dist

包（在某些情况下，您可能会遇到需要

@react-pdf-viewer

，这也与这里具有相同的相关性）。

因此，为了确保这些软件包适合您，请确保您使用这些版本：

"@react-pdf-viewer/core": "^3.4.0",
"pdfjs-dist": "^2.11.338",

如果你想要工具栏，请使用这个：

"@react-pdf-viewer/toolbar": "^3.4.0",

（为了快速安装，请使用此：

npm install @react-pdf-viewer/[email protected] @react-pdf-viewer/[email protected] [email protected]

）

安装所有版本后，在代码的某些必需区域中进行以下导入：

import { Worker, Viewer } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/core/lib/styles/index.css";
import { toolbarPlugin } from "@react-pdf-viewer/toolbar";
import "@react-pdf-viewer/toolbar/lib/styles/index.css";
import { GlobalWorkerOptions } from "pdfjs-dist";
GlobalWorkerOptions.workerSrc = `https://unpkg.com/[email protected]/build/pdf.worker.min.js`;

我知道像这样将初始化放在顶部并不是最佳实践，但说实话，如果它没有损坏，就不要修复它。

之后，在 RFC 的返回部分执行以下操作：

<BlobProvider
  document={
    <Document>
      <Page>
        <Text>Something something</Text>
      </Page>
    </Document>
  }>
  {({ loading, url, blob }) => (
    <div style={{ height: "100%" }}>
      {blob && (
        <Worker workerUrl={`https://unpkg.com/[email protected]/build/pdf.worker.min.js`}>
          <Viewer fileUrl={URL.createObjectURL(blob)} />
        </Worker>
      )}
    </div>
  )}
</BlobProvider>

到那时，您应该已经拥有一个可以实际工作的 PDF 查看器了。

我真的希望这对任何人都有帮助，如果没有，那么这就是我的方式，强调找出如何使这项工作（尤其是版本部分）的经历是多么糟糕。

Answer 1

你节省了我的时间！经过几个小时寻找解决方案后，我完全理解你的意思。非常感谢你。