在reactJS中显示PDF [英] Display PDF in reactJS

问题描述

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

我从后端获取了全部原始pdf数据，因此我尝试使用下面的代码.

I got the entire raw pdf data from backend so I was trying with code below.

<ReactPDF file={renderPdf}/>

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

But it displayed "Failed to load PDF file." I don't wish to save any file in local. The best approach is the display the pdf with the raw data provided by backend.

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

In terminal, it logged the error:

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数据作为file属性的值直接传递到<ReactPDF>组件.但是根据文档，您需要使用包含data属性的对象:

it looks like you're passing the PDF data directly to the <ReactPDF> component as the value of the file prop. But according to the docs you need to use an object containing a data property:

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

似乎您也可以将file设置为包含url属性的对象，以使ReactPDF自己从后端获取pdf，如果那样更容易的话:

it seems you can also set file to an object containing a url property, to let ReactPDF fetch the pdf from your backend by itself, if that's easier:

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

这篇关于在reactJS中显示PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！