Reactjs react pdf：异步使用PDFDownloadLink，而不阻塞应用程序的其余部分

我正在使用

react pdf

包中的

PDFDownloadLink

在我的应用程序中动态生成pdf，并允许用户根据传递给生成pdf文档的组件的数据下载报告。但是，此PDF中需要呈现400多个页面，此操作会在几秒钟内阻塞主线程。是否有任何方法使此操作异步，以便在生成PDF时应用程序的其余部分将继续运行？此外，我希望能够缓存结果，因为传递到组件的数据可能来自大约8个不同的数据数组，这些数据数组变化不大，因此在这些数组之间切换，如果给定数组的PDF之前已经生成过一次，我宁愿不必再次渲染PDF。。。我猜blob数据需要存储在某个地方，也许是本地存储

从'@react pdf/renderer'导入{页面、文本、视图、文档、样式表、PDFDownloadLink}
常量应用=（）=>{
const condition=“firstCondition”；
常量filteredRowData=rowData.filter（a=>a.condition=condition）；
返回(
{（{blob，url，加载，错误}）=>
正在加载？“报告加载…”：“报告已准备好下载”
}
);
}
const PDF_报告_文档=（道具）=>{
const{rowData}=props；
const styles=StyleSheet.create({
第页：{
flexDirection:'列'，
背景颜色：“#e4”
},
第节：{
差额：10，
填充：10，
flexGrow:1
}
});
返回(
{rowData.map（（行，索引）=>
名称：{row.FULLNAME}
)}
);
}

我终于在一份解决这个问题的报告中找到了答案：

您的功能请求是否与问题相关？请描述。 这是一种进步。目前，如果使用“PDFDownloadLink”，则PDF将作为组件加载生成

描述您想要的解决方案 这不是强制性的，但有多个沉重的PDF准备下载不是最好的方法，因为不是每个用户都需要它

描述您考虑过的备选方案 我使用了

pdf（）

函数来生成blob，并使用

文件保护程序

库来下载它：

import { saveAs } from 'file-saver';
import { pdf } from '@react-pdf/renderer';
import PdfDocument from '../PdfDocument';

const generatePdfDocument = async (documentData) => {
        const blob = await pdf((
            <PdfDocument
                title='My PDF'
                pdfDocumentData={documentData}
            />
        )).toBlob();
        saveAs(blob, fileName);
};

export default generatePdfDocument;

从“文件保护程序”导入{saveAs}；
从'@react pdf/renderer'导入{pdf}；
从“../PdfDocument”导入PdfDocument；
const generatePdfDocument=异步（documentData）=>{
const blob=wait pdf((
)).toBlob（）；
saveAs（blob，文件名）；
};
导出默认GeneratePDF文档；

---

在IE上为简单内容生成blob需要22秒，而在chrome上只需要3秒@JohnRDOrazio你能帮我吗？你可能想检查问题或在答案中链接的github回购上打开新问题。恐怕我不是那个能帮你的人。