使用react-pdf与file-saver生成组件PDF时文件损坏求助

我是React新手，尝试将组件导出为PDF格式，使用react-pdf的多种方法均未成功。下载的PDF文件名参数拼接正确，但文件损坏无法打开，恳请帮忙排查原因。

相关代码 #

文档组件 #

import React from "react";
import { PDFViewer, Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";

const styles = StyleSheet.create({
    page: {
        flexDirection: "row",
        backgroundColor: "#E4E4E4",
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1,
    },
});

export const ChallanPrint = (props: any) => {
    return (
        <Document> <Page size="A4" > <View ><Text> {JSON.stringify(props.pdfDocumentData)}</Text> </View> </Page> </Document>
    )
}

主组件生成PDF函数 #

import { saveAs } from 'file-saver';
import { pdf } from '@react-pdf/renderer';
const generatePdfDocument = async (documentData: any) => {
        const blob = await pdf((
            <ChallanPrint
                pdfDocumentData={challan}
            />
        )).toBlob();
        saveAs(blob, challan?.studentName+'-'+challan?.date+'.pdf');
    };

按钮调用 #

<button className="button" onClick={generatePdfDocument}>Print Challan</button><br></br>

输出情况 #

问题排查与解决 #

• 参数传递不匹配：generatePdfDocument函数声明接收documentData参数，但内部直接使用未在函数作用域定义的challan变量，导致组件可能接收undefined数据，引发PDF生成异常。修改为使用传入的参数：

const generatePdfDocument = async (documentData: any) => {
    const blob = await pdf(<ChallanPrint pdfDocumentData={documentData} />).toBlob();
    saveAs(blob, `${documentData?.studentName}-${documentData?.date}.pdf`);
};

• 点击事件未传参：按钮点击时未传递所需的challan数据，需修改点击事件传入正确数据：

<button className="button" onClick={() => generatePdfDocument(challan)}>Print Challan</button>

• Page组件未应用样式：ChallanPrint中的Page未使用定义好的page样式，可能导致布局异常，建议添加样式：

<Page size="A4" style={styles.page}>

• 添加错误捕获：在生成函数中加入错误捕获，便于排查生成过程中的报错：

const generatePdfDocument = async (documentData: any) => {
    try {
        const blob = await pdf(<ChallanPrint pdfDocumentData={documentData} />).toBlob();
        saveAs(blob, `${documentData?.studentName}-${documentData?.date}.pdf`);
    } catch (error) {
        console.error('PDF生成失败:', error);
    }
};

内容的提问来源于stack exchange，提问作者Shahzaib