来自 IPFS 的反应显示 pdf答案

【问题标题】：React display pdf from IPFS来自 IPFS 的反应显示 pdf
【发布时间】：2019-08-28 10:52:43
【问题描述】：

我想显示一个使用 IPFS 存储的 PDF 文件。

我正在使用 React PDF 包来显示文件。

<div>
  <Document
    file = {"https://ipfs.io/ipfs/" + this.state.IPFSlink}
    onLoadSuccess={this.onDocumentLoadSuccess}
  >
    <Page pageNumber={pageNumber} />
  </Document>
</div>

但是，当我运行页面并获取 IPFSlink（这是正确的）时，我收到了错误消息

加载 PDF 文件失败。

和控制台中的这个错误

index.js:1446 错误：设置假工人失败：“无法读取未定义的属性 'WorkerMessageHandler'”。在 pdf.js:11664

有没有人尝试过这样做？

【问题讨论】：

请记得实际阅读the syntax article。这不是 github，代码不使用三个反引号，它以四个空格开头。容易忘记，重要的是要记住。另外，您将哪个库用于<Document> 组件？他们有问题跟踪器吗？
对不起，图书馆是 react-pdf

标签： reactjs pdf ipfs

【解决方案1】：

我在文件顶部错过了这个：

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

【讨论】：

你能发布完整的源文件吗？我也有同样的问题

【解决方案2】：

它实际上在他们的文档here中说：

Create React App uses Webpack under the hood, so you can follow Webpack instructions.

Standard instructions will also work. In Create React App, you can copy
pdf.worker.js file from pdfjs-dist/build to public directory in order for 
it to be copied to your project's output folder at build time.

Standard (Browserify and others)
If you use Browserify or other bundling tools, you will have to make sure 
on your own that pdf.worker.js file from pdfjs-dist/build is copied to your project's output folder.

If you don't need to debug pdf.worker.js, you can use pdf.worker.min.js file instead, which is roughly half the size. For this to work, however, you will 
need to specify workerSrc manually like so:

这里是重要的位（注意如果你使用这个方法，你有责任将文件pdf.worker.min.js放在你的应用程序可以看到的地方——例如，下面的路径假设pdf.worker.min.js在你的 React 应用程序的根目录 -->

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

如果您想让生活变得非常简单并且只使用云可用的 CDN，您可以这样做 -->:

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

请记住，如果您使用的是 CDN，并且它不是您的 react 应用程序的一部分，您可能需要将其包含在您的内容安全策略 (CSP) 例外列表中（如果您使用 CSP）

【讨论】：