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

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

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

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

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

我解决了这个问题。我将从后端收到的二进制数据转换为 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 以执行渲染。现在它完美地工作了！

在从 react 渲染 html 时，

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

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

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

这将呈现您的 PDF 文件。

试试这个

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