在 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'

原文由 Mervyn Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

看来您还可以将 file 设置为包含 url 属性的对象，以让 ReactPDF 自己从后端获取 pdf，如果这更容易的话：

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

原文由 Dan O 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

   <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>

原文由 Dhanuka Perera 发布，翻译遵循 CC BY-SA 4.0 许可协议