REACT PDF：无法使用包显示静态 PDF 文件

Question

我正在尝试在 React 应用程序中显示静态 pdf。我尝试了很多包：

反应-pdf

react-pdf-js

react-pdf-js-无限

简单反应-pdf

pdfjs-dist

react-pdf-pages

他们经常说我们可以很容易地使用 URL 或 pdf 文件作为 PDF 组件的 props，但我不能使用。

我有两个主要错误。

1. 因为我想使用 myPDF 作为组件的道具，所以我写了这个：

   从'path/to/pdf_file'导入myPDF；

然后，render_some_component pdf:{myPDF}

这是错误：

ModuleParseError in 模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。 （此二进制文件的源代码省略）

（当我评论那行时，这种错误消失了）

我在 webpack 配置中使用了文件加载器，我尝试了很多不同的方法，但都失败了。

1. 我直接将 pdf 文件用于这样的道具：

   render_some_component pdf:{'path/to/pdf_file'}

   • 在控制台中：

警告：设置假工人。

11:23:55.962 pdf.worker.js:349 警告：忽略十六进制字符串中的无效字符“33”

11:23:55.963 pdf.worker.js:349 警告：忽略十六进制字符串中的无效字符“79”

... 有很多这样的“忽略无效字符”，它总是以：

localhost/:1 Uncaught (in promise) InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}

• 在网络中，标头，我看到了：

请求网址：http://localhost:3000/myPdfFile.pdf

请求方法：GET

状态码：200 OK

远程地址：127.0.0.1:3000

• 但在网络响应中，我只看到 HTML 布局。

我认为 pdf 文件已正确加载，但包无法识别其 PDF 结构。

除了两个主要错误外，我还有一个与包中使用的 Worker 相关的错误，但我不知道如何修复它：

未捕获的 DOMException：无法构造 'Worker'

（这与 Chrome 有关，因为人们说 Chrome 不允许本地服务器中的 Worker）

非常感谢任何帮助，因为我已经在 4 天内陷入困境。

Answer 1

你能澄清一下你的主要任务是什么吗？ 如果我理解正确，您想显示应用程序的一部分中已经存在的 PDF 文件？您不想使用 JavaScript 创建新的 PDF。

如果您只想显示 PDF，您是否尝试过使用 iframe？ 像这样的：

<iframe
   title="file"
   style={{ width: '100%', height: '100%' }}
   src={downloadURL}
/>

您还可以在此处使用从组件所在位置到文件的相对路径，或使用文件的完整 URL。