Question

目前我正在尝试使用此反应组件react-pdf-js使用base64数据加载PDF。

我正在尝试以下列方式加载PDF时收到PDFDocument: stream must have data错误：

   <PDF
      file={`data:application/pdf;base64,${this.state.base64}`}
      onDocumentComplete={this.onDocumentComplete}
      onPageComplete={this.onPageComplete}
      page={this.state.page}
    />

我已成功使用此React组件react-pdf将PDF加载到页面上，但该库无法实现分页。适用于该组件的代码如下：

    <Document
      file={`data:application/pdf;base64,${this.state.base64}`}
    >
      <Page pageNumber={this.state.pageNumber} />
    </Document>

我希望有人能够帮助我弄清楚如何使用react-pdf-js使用base64加载文件，或者指点我用react-pdf实现分页？

Answer 1

我也一直在研究如何执行此操作，并由于以下条目而找到了一种方法：Creating a Blob from a base64 string in JavaScript 设置pdf文件的方式如下：

const byteCharacters = atob(response);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
const byteArray = new Uint8Array(byteNumbers);
this.state.pdf = new Blob([byteArray], {type: 'application/pdf'});

文档如下：

<Document file={this.state.pdf} > ...

不确定在这里是否正确使用状态，我在代码中使用状态挂钩。但是使用blob应该可以。

Answer 2

您可以使用embed，它非常简洁。

return <embed src={`data:application/pdf;base64,${base64ContentString}`}  type="application/pdf" width="100%"></embed>

使用react-pdf-js

2 个答案: