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

如果您的目标只是在应用程序中查看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>

Answer 2

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

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

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

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

Answer 3

我解决了这个问题。我将从后端接收的二进制数据转换为ArrayBuffer。

axios.post(//fire your API).then(response =>
        (response.status === 200? response.data : null))
    .then(pdfdata => {
        var len = pdfdata.length;
        var bytes = new Uint8Array( len );
        for (var i = 0; i < len; i++){
            bytes[i] = pdfdata.charCodeAt(i);
        }

        const renderPdf = bytes.buffer

然后我实际上将bytes.buffer分配给renderPDF来执行渲染。现在它完美无缺！

从反应中渲染html，

import PDF from 'react-pdf-scroll'
<PDF file={renderPdf} scale={1.3} pages={Infinity} />

Answer 4

如果从后端返回的数据采用缓冲区格式，则可以使用react-pdf可以配置的已解析JSON对象设置文件信息。

file={{data: JSON.parse(renderPDF).data}}

这将呈现您的PDF文件。

Answer 5

尝试一下

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

Answer 6

简单的HTML元素可以解决问题。也在寻找解决方案，当您的来源来自链接时，它可以很好地工作。

Answer 7

这是一个非常古老的问题，导致 pdf 在移动设备上被隐藏。

我试过了

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

即使这样也行不通

终于找到了一个可行的解决方案

<iframe src={pdf_url} />

希望这有效。

美好的一天编码！

在reactJS中显示PDF

7 个答案: