1

我在 React 中使用了一个名为react-pdf的库，它有一个组件Document. DocumentComponent 包含一个名为file的属性（其输入类型是字符串）。
如何将作为 base64 内容的响应（来自 redux 的道具）从 API 传递到Document的文件属性中？那么，是否有任何库可以从 API 接受我的 base64 内容并在 pdf 文档中显示输出？

这是示例代码：

import React from 'react';
import { connect } from 'react-redux';
import { Document } from 'react-pdf';

import { pdfData } from '../Store/ActionCreators'

class Billing extends React.Component {

  componentDidMount() {
    this.props.pdfData(mobile);
  }

  render() {
    const { base64 } = this.props;
    return (
      <Document file=''>

      </Document>
    )
  }
}

const mapStateToProps = state => ({
  base64: state.login.data
})

export default connect(mapStateToProps, { pdfData })(Billing);

如果我将 base64 传递给文件，那么它会将其视为字符串并输出为base64。

是否有任何相关的解决方案可以有效地解决它？

4

1 回答 1

0

默认情况下，pdf-lib 确实支持 base64 并附加了一个示例来说明如何，并且您需要知道您的 base64 文档的页码，为此我使用了pdf-lib，我通过了 base64 并获取属性将用于操作base64文档“rotating-scaling-merging-pdf-addImage-etc”

沙盒示例

const pdfDocument = await PDFDocument.load(base64);
const numPages = pdfDocument.getPageIndices();

然后将道具和您的数据传递给如下：

<Document file={`data:application/pdf;base64,${base64}`}>

             {numPages.map((page, ind) => {
              return <div key={ind} id={`viewer-page-${ind+1}`} className=" some-class-names">
                <Page
                  key={`page_${ind + 1}`}
                  pageNumber={ind + 1}
                  scale={1} // you can scale by updating this
                  rotate={0} // you can scale by updating this 
                  className={'some-class-names-page'}
                  width={400}
                  renderAnnotationLayer={false} // true by default
                  onRenderSuccess={renderMetricTracker}
                />
              </div>;
            })}
</Document>
于 2021-10-04T11:32:00.850 回答