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

Question

我想在React app中显示静态pdf。我尝试过很多套餐：

反应-PDF

反应-PDF-JS

反应-PDF-JS-无限

简单反应的-PDF

pdfjs - 距离

反应-PDF的页

他们经常说我们可以轻松地使用URL或pdf文件作为PDF组件的道具，但我也不能使用。

我有两个主要错误。

1. 由于我想使用myPDF作为组件的道具，我写这个：

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

然后，render_some_component pdf：{myPDF}

这是错误：

中的ModuleParseError             模块解析失败：意外的令牌（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：“PDF结构无效”}

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

请求网址：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。