当前位置: 首页 > 面试题库 >

在reactJS中显示PDF

冷浩瀚
2023-03-14
问题内容

我正在关注此软件包https://www.npmjs.com/package/react-
pdf

我从后端获取了整个原始pdf数据,因此我尝试使用以下代码。

<ReactPDF file={renderPdf}/>

但是它显示“无法加载PDF文件”。我不想在本地保存任何文件。最好的方法是显示pdf以及后端提供的原始数据

在终端中,它记录了错误:

URIError: Failed to decode param '/%PDF-1.4%%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%20ReportLab%20Generated%20PDF%20document%20http://www.reportlab.com1%200%20obj%3C%3C/F1%202%200%20R%20/F2%203%200%20R%20/F3%207%200%20R%3E%3Eendobj2%200%20obj%3C%3C/BaseFont%20/Helvetica%20/Encoding%20/WinAnsiEncoding%20/Name%20/F1%20/Subtype%20/Type1%20/Type%20/Font%3E%3Eendobj3%200%20obj%3C%3C/BaseFont%20/Helvetica-Bold%20/Encoding%20/WinAnsiEncoding%20/Name%20/F2%20/Subtype%20/Type1%20/Type%20/Font%3E%3Eendobj4%200%20obj%3C%3C/BitsPerComponent%208%20/ColorSpace%20/DeviceRGB%20/Filter%20[%20/ASCII85Decode%20/FlateDecode%20]%20/Height%20480%20/Length%2036803%20/SMask%205%200%20R%20%20%20/Subtype%20/Image%20/Type%20/XObject%20/Width%20640%3E%3EstreamGb%22-V'

问题答案:

好像您是将PDF数据<ReactPDF>作为fileprop
的值直接传递给组件一样。但是根据文档,您需要使用包含data属性的对象:

<ReactPDF
  file={{
    data: renderPdf
  }}
/>

似乎您也可以设置file一个包含url属性的对象,让ReactPDF自己从后端获取pdf,如果这样更容易:

<ReactPDF
  file={{
    url: 'http://www.example.com/sample.pdf'
  }}
/>


 类似资料:
  • 问题内容: 我们现在在使用React时遇到了一些问题,但这 有点 归结于我们如何使用React的一部分。 我们应该如何显示/隐藏子组件? 这就是我们的编码方式(这只是组件的片段)… 最近,我一直在阅读一些示例,例如应该沿着以下方向进行: 我应该一直在使用那个React.render()吗?似乎停止了各种各样的事情,如级联到孩子和诸如… 问题答案: 我提供了一个工作示例,它遵循您的第二种方法。更新组

  • 所以,我试图找出最好的方法来做到这一点: 在反应中显示模态或隐藏模态。在我的主页上,我有很多照片,我目前的状态设置是: 当我将showModal设置为true时,它将传递到引导模式: 问题:每次我打开模态,它都会改变主状态,并重新呈现主页面。阻止这种重新渲染发生的最佳实践方法是什么?我试过: 我还考虑使用jquery在外部手动显示模式或隐藏模式,从而不改变状态。问题很明显,卸载和接收道具很难维护。

  • 我已经用ReactJS创建了一个PWA应用程序。我还实施了 Firebase 云消息传递功能,用于在设备上显示推送通知。 当我在Android手机上安装我的PWA时,我得到了正确的消息推送。 但是我的通知找不到怎么发图标 我用FirebaseAdmin SDK完成的ASP.NET核心WebApi (2.2)来触发通知。 我来自PWA的manifest.json文件看起来是正确的。(192x192

  • 问题内容: 我正在尝试突出显示与查询匹配的文本,但是我不知道如何使标记显示为HTML而不是文本。 当前输出: Java 脚本 所需的输出: Java 脚本 问题答案: 这是我简单的twoliner辅助方法: 它返回一个跨度,其中所请求的零件以标签突出显示。如果需要,可以简单地将其修改为使用其他标签。 更新: 为避免唯一键丢失警告,这是一个基于跨度并为匹配的零件设置fontWeight样式的解决方案

  • 问题内容: 我是ReactJS(0.13.1)的新手,并且在我的应用程序中创建了一个组件来显示HTML5视频。 它似乎完美运行,但仅适用于第一选择。从一个视频切换到另一个视频时(更改时),页面中实际显示和播放的视频不会改变。 我可以在Chrome检查器中看到元素更新,但是页面中实际渲染的视频没有改变,如果已经播放,则继续播放。Safari和Firefox中也会发生相同的情况。所有其他元素也会适当更

  • 问题内容: 开发需要显示pdf 的桌面应用程序。我了解到(当前版本)不支持pdf查看/显示,我也了解到。 现在,问题: 是否有任何外部组件或库可以在JavaFX中查看pdf?它应该是一个免费软件。 (如果必须使用)如何将其嵌入到我的应用程序中。 问题答案: JPedalFX示例代码和用法 JPedalFX下载提供了有关使用JPedalFX的示例代码。 我有点of脚,但是我只是在这里粘贴从JPeda