React中区分打印完成/关闭对话框及Microsoft Print to PDF适配问题

需求是让用户打印文档并更新数据库状态，用户常用Microsoft Print to PDF生成PDF。需要区分两种场景：点击打印按钮完成PDF保存，还是未执行打印就关闭对话框；成功打印后需重定向用户。

当前使用element.onafterprint事件遇到以下问题：

• 无论用户是保存PDF还是直接关闭打印对话框，事件都会触发，无法区分操作类型
• 使用Microsoft Print to PDF时，点击打印按钮后事件立即触发，但此时还会弹出保存对话框，导致网页在用户完成保存前就提前重定向

现有React实现代码：

const printDoc = () => {
    const divContents = document.getElementById('printArea').innerHTML;
    const element = window.open('', '', 'height=700, width=1024');
    element.document.write(divContents);
    element.onafterprint = (e) => { // 此处逻辑不符合预期
        console.log(e)
        element.close();
        updatePickListPrintStatus(PRINT_STATUS.SUCCESS);
        redirectAfterPrint()
    }
    getCssFromComponent(document, element.document);
    element.document.close();
    // 懒加载图片延迟处理
    setTimeout(() => {
        element.print();
    }, 1000);
};

针对Microsoft Print to PDF的特性，无法直接通过onafterprint区分操作，但可以通过以下两种可靠思路解决：

思路1：利用打印窗口关闭时机判断 #

Microsoft Print to PDF有个特性：用户完成PDF保存后，打印窗口会自动关闭；若用户直接关闭打印对话框，打印窗口会立即关闭。可以结合定时器和onunload事件判断：

• 打印窗口打开后启动短定时器（如300ms），超时后标记打印成功状态
• 监听打印窗口的onunload事件，若事件在定时器超时后触发，说明用户完成了保存操作；反之则是直接关闭对话框

修改后的代码：

const printDoc = () => {
    const divContents = document.getElementById('printArea').innerHTML;
    const element = window.open('', '', 'height=700, width=1024');
    let isPrintSuccess = false;

    // 启动定时器，超时后标记为打印成功
    const printTimer = setTimeout(() => {
        isPrintSuccess = true;
    }, 300);

    element.document.write(divContents);
    getCssFromComponent(document, element.document);
    element.document.close();

    element.onunload = () => {
        clearTimeout(printTimer);
        element.close();
        // 仅在标记为成功时执行更新和重定向
        if (isPrintSuccess) {
            updatePickListPrintStatus(PRINT_STATUS.SUCCESS);
            redirectAfterPrint();
        }
    };

    // 懒加载图片延迟处理
    setTimeout(() => {
        element.print();
    }, 1000);
};

思路2：结合页面可见性API判断（适合现代浏览器） #

部分现代浏览器支持通过页面可见性变化辅助判断打印状态：

• 监听beforeprint事件记录打印开始时间
• 监听afterprint事件，计算事件触发的时间差，若超过一定阈值（如500ms）则认为用户完成了保存操作
• 结合document.hidden判断打印窗口的可见性变化

该方法兼容性稍差，更适合Chrome等现代浏览器，对于Edge的Microsoft Print to PDF，思路1的可靠性更高。

注意事项 #

• 定时器的时间可根据设备性能调整，避免因加载速度差异导致误判
• 测试时需覆盖两种场景：保存PDF和直接关闭打印对话框，确保逻辑正确

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