React组件调用自定义reactToPdfUtils的savePDFNOW后，如何通过回调更新状态渲染成功提示

回调完全适配这个跨模块调用的场景，之前实现失败本质是没有打通从工具函数到组件的完成信号传递路径，以下是两种可直接落地的实现方案：

方案1：基于回调的最小改动实现 #

不需要重构原有PDF生成的核心逻辑，只需要给savePDFNOW新增一个完成回调参数，把执行结果通过这个参数传回组件即可。

• 改造工具文件reactToPdf.js：

export const savePDFNOW = (sourceElement, willSaveToDB, pageTemplate, onCompleted) => {
    // 保留原有全部PDF生成逻辑
    // 等所有生成、下载流程完全执行完成后，触发回调传递结果
    onCompleted?.({
        success: true,
        message: 'PDF生成完成'
    })
    // 流程异常时同样通过回调传递错误信息
    // onCompleted?.({ success: false, message: 异常详情 })
};

• 改造组件文件passportMaker.jsx的handleSave方法：

handleSave = (sourceElement, willSaveToDB, pageTemplate) => {
    console.log('handleSave called in passportMaker!');
    reactToPdfUtils.savePDFNOW(
        sourceElement,
        willSaveToDB,
        pageTemplate,
        // 传入回调函数，收到完成通知后直接更新组件状态
        (result) => {
            this.setState({
                saveStatus: result.success,
                tipText: result.message
            })
        }
    )
};

方案2：基于Promise的封装实现 #

如果savePDFNOW内部包含异步逻辑（比如DOM截图、PDF文件写入、网络上传等），用Promise封装返回结果，后续组件侧可以用async/await编写逻辑，比嵌套回调的可读性更好。

• 改造工具文件reactToPdf.js：

export const savePDFNOW = (sourceElement, willSaveToDB, pageTemplate) => {
    // 返回Promise实例包裹所有生成流程
    return new Promise((resolve, reject) => {
        try {
            // 保留原有全部PDF生成逻辑
            // 流程全部执行完成后向外抛出成功结果
            resolve({
                success: true,
                message: 'PDF生成完成'
            })
        } catch (err) {
            // 捕获异常向外抛出错误信息
            reject({
                success: false,
                message: err.message
            })
        }
    })
};

• 改造组件文件passportMaker.jsx的handleSave方法：

handleSave = async (sourceElement, willSaveToDB, pageTemplate) => {
    console.log('handleSave called in passportMaker!');
    try {
        // 直接等待PDF生成完成拿到结果，代码逻辑和同步流程一致
        const saveResult = await reactToPdfUtils.savePDFNOW(sourceElement, willSaveToDB, pageTemplate)
        this.setState({
            saveStatus: saveResult.success,
            tipText: saveResult.message
        })
    } catch (err) {
        // 捕获生成过程中的异常，更新错误提示状态
        this.setState({
            saveStatus: false,
            tipText: err.message
        })
    }
};

注意：必须确保savePDFNOW内所有异步流程完全执行完毕后，再触发完成通知（调用回调/resolve），不要在异步操作未结束时提前通知组件，避免出现PDF还在生成就弹出成功提示的问题。

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