React-PDF使用大型PDF时性能较低

Question

我使用npm的React-PDF，使用PDFDownloadLink函数下载一个大的pdf文件。但是PDF的创建对我的应用程序加载产生了很长的滞后时间。

我尝试过计时器、延迟加载组件、使用useState更改文档数据。

我只需要加载文档数据，一旦PDF按钮被点击，而不是在每个页面呈现。

Answer 1

尝试类似这样的操作(documentGenerated是一个属性，用于切换生成PDFDownloadLink组件的按钮。

如果你多次渲染你的pdf文档，你的应用程序的性能将会受到影响，从而导致性能下降。确保正确切换PDFDonwloadLink组件。

 {!documentGenerated ? (
            <button
              className="btn"
              onClick={generatePDF}
            >
              Generate PDF
            </button>
          ) : (
            <PDFDownloadLink
              document={<YourComponent {...state} />}
              fileName={outputFilename}
              className="btn btn-primary"
            >
              {({ blob, url, loading, error }) =>
                loading
                  ? 'Loading document...'
                  : 'Document is ready!'
              }
            </PDFDownloadLink>
          )}

Answer 2

CloudPDF提供了一个React PDF查看器。它基本上是pdf.js，但随后在服务器上进行了预呈现。这提供了延迟加载大型pdf文件并保持性能的可能性。

import CloudPdfViewer from '@openbook/cloudpdf-viewer';

export default function () {
  return (
    <CloudPdfViewer documentId="346467a6-fa61-43ad-b45a-d1fdc3da0007" width="100%" height="500px" />
  );
};

​

​

解说者:我在为CloudPDF工作，它仍然是测试版。