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

html5 • • 问答

我使用的是PDFDownloadLink从react-pdf包以在我的应用程序中即时生成 PDF，并允许用户根据传递给生成 PDF 文档的组件的数据下载报告。但是这个PDF有400多页需要渲染，这个操作阻塞了主线程几秒钟。有什么方法可以使此操作异步，以便在生成 PDF 时应用程序的其余部分将继续运行？此外，我希望能够缓存结果，因为传递给组件的数据可能来自大约 8 个不同的数据数组，这些数组变化不大，因此我宁愿不必在这些数组之间切换如果该给定数组的 PDF 之前已经生成过一次，则重新渲染 PDF...我'

import { Page, Text, View, Document, StyleSheet, PDFDownloadLink } from '@react-pdf/renderer'
const App = () => {
    const condition = "firstCondition";
    const filteredRowData = rowData.filter(a => a.condition = condition);
    return (
            <PDFDownloadLink
                document={<PDF_REPORT_Document rowData={filteredRowData} />}
                fileName={"PDF_REPORT.pdf"}
                style={{color:'white'}}
                >{({ blob, url, loading, error }) =>
                    loading ? "Report loading..." : "Report ready to download"
                }</PDFDownloadLink>
    );
}

const PDF_REPORT_Document = (props) => {
    const { rowData } = props;
    const styles = StyleSheet.create({
        page: {
          flexDirection: 'column',
          backgroundColor: '#E4E4E4'
        },
        section: {
          margin: 10,
          padding: 10,
          flexGrow: 1
        }
    });

    return(
        <Document>
        {rowData.map((row,index) => 
            <Page size="A4" style={styles.page} key={index}>
                <View style={styles.section}>
                    <Text>Name: {row.FULLNAME}</Text>
                </View>
            </Page>
        )}
        </Document>
    );
}

回答

我终于在 github上的一个问题中找到了这个问题的答案，该问题解决了这个确切的问题：

您的功能请求是否与问题有关？请描述。
这是一种改进。目前，如果您使用“PDFDownloadLink”，则会在组件加载时生成 PDF。

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

描述您考虑
过的替代方案我使用pdf()函数生成 blob 和file-saverlib 来下载它：

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;
以上是react-pdf：异步使用PDFDownloadLink而不会阻塞应用程序的其余部分的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>