如何通过ReactToPrint判断打印操作是否成功完成

首先得明确：浏览器原生的打印API本身没有提供区分“打印成功”和“用户取消打印”的回调，ReactToPrint的onAfterPrint钩子会在打印窗口关闭时触发——不管用户是点了打印还是取消。但我们可以通过一些间接手段来判断打印流程是否结束，甚至尝试区分两种情况。

方法一：结合页面可见性API+状态标记 #

利用浏览器打印时页面会短暂进入隐藏状态的特性，配合状态标记来判断打印流程收尾：

1. 先在组件里加个状态标记打印是否在进行中：

const [isPrinting, setIsPrinting] = useState(false);

2. 修改你的useReactToPrint配置：

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  onBeforeGetContent: async () => {
    setIsPrinting(true);
    await handleOnBeforeGetContent(); // 保留你原来的前置逻辑
  },
  onAfterPrint: () => {
    // 监听页面可见性变化，判断打印窗口关闭后的状态
    const handleVisibilityChange = () => {
      if (!document.hidden) {
        setIsPrinting(false);
        // 到这里说明打印流程已经结束（不管成功还是取消）
        // 这里可以执行你需要的后续操作，比如原来的刷新
        // window.location.reload();
        document.removeEventListener('visibilitychange', handleVisibilityChange);
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    // 加个定时器兜底，防止可见性事件没触发
    setTimeout(() => {
      setIsPrinting(false);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    }, 3000);
  },
});

方法二：仅判断打印流程结束（不区分成功/取消） #

如果你的业务不需要区分用户是打印还是取消，只是要知道打印窗口已经关闭，那直接启用你注释掉的onAfterPrint就行：

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  onBeforeGetContent: handleOnBeforeGetContent,
  onAfterPrint: () => {
    // 打印窗口关闭后执行，不管用户操作是打印还是取消
    window.location.reload();
  },
});

关键说明 #

• 没有任何方法能100%准确区分“打印成功”和“取消”，因为浏览器不会把这个信息暴露给前端
• onAfterPrint的触发时机是打印窗口关闭的瞬间，和用户最终是否完成打印无关
• 页面可见性的方法是目前最可靠的间接判断方式，因为打印时浏览器会强制隐藏当前页面

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