在 reactJS 中显示 PDF

Question

我正在关注这个包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'

Answer 1

尝试这个

<object width="100%" height="400" data="http://www.africau.edu/images/default/sample.pdf" type="application/pdf">   </object>

Answer 2

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

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

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

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

Answer 3

如果您的目标只是在应用程序中查看 pdf，最简单的方法是在 HTML 中使用 object 标签。您不需要导入任何库并且适用于大多数浏览器。但这是缺乏定制和样式。

  <object data="http://africau.edu/images/default/sample.pdf" type="application/pdf" width="100%" height="100%">
      <p>Alternative text - include a link <a href="http://africau.edu/images/default/sample.pdf">to the PDF!</a></p>
  </object>