javascript - 大型 PDF 的 React-PDF 性能缓慢

Question

我正在使用来自 npm 的 React-PDF，带有 PDFDownloadLink 功能来下载一个大的 pdf。但是 PDF 是在我的应用程序加载时创建的，延迟时间很长。

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

单击 PDF 按钮后，我只需要加载文档数据，而不是在每个页面渲染上。

Answer 1

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" />
  );
};

Disclamer：我正在为 CloudPDF 工作，它仍然是测试版。

Answer 2

尝试这样的事情（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>
          )}