在 reactJS 中显示 PDF
2017-08-09
161311
我正在关注此包 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'
3个回答
如果您的目标只是在应用程序中查看 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
2020-07-21
看起来您正在将 PDF 数据直接传递给
<ReactPDF>
组件作为
file
属性的值。但根据
文档
，您需要使用包含
data
属性的对象：
<ReactPDF
file={{
data: renderPdf
}}
/>
似乎您还可以将
file
设置为包含
url
属性的对象，以让 ReactPDF 自行从后端获取 pdf，如果这样更容易：
<ReactPDF
file={{
url: 'http://www.example.com/sample.pdf'
}}
/>
Dan O
2017-08-09
尝试一下
<object width="100%" height="400" data="http://www.africau.edu/images/default/sample.pdf" type="application/pdf"> </object>
Nikit Barochiya
2019-06-17