React-PDF 处理大 PDF 时性能低下

Question

我正在使用 npm 中的 React-PDF，并通过 PDFDownloadLink 函数下载大型 pdf。但是在我的应用程序加载时创建的 PDF 造成了很长的延迟时间。

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

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

Answer 1

尝试这样的操作（documentGenelated 是一个属性，用于切换生成 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>
          )}