在reactJS中显示PDF

小编典典

在reactJS中显示PDF

reactjs

我正在关注此软件包 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'

阅读 300

2020-07-22

共1个答案

小编典典

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

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

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

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

2020-07-22