如何监听浏览器打印对话框的确认/取消操作（iframe场景）

由于原生onafterprint事件在Firefox和Chrome中的触发时机不一致，无法直接区分用户是确认打印还是取消操作，结合你使用iframe的场景，可以通过以下两种方案实现需求：

方案1：结合媒体查询（matchMedia('print')）+ 定时器判断 #

利用打印预览状态的媒体查询变化，结合定时器区分用户操作：

this.iframe = document.createElement('iframe');
document.body.appendChild(this.iframe);

// 向iframe添加图片
const image = new Image();
image.src = 'imageUrl';
this.iframe.contentDocument.body.appendChild(image);

const printWindow = this.iframe.contentWindow;
let printCancelTimer = null;

// 监听打印媒体查询状态
const printMediaQuery = printWindow.matchMedia('print');
const handlePrintStateChange = (event) => {
  if (event.matches) {
    // 进入打印预览，启动定时器：如果用户取消，对话框会快速关闭，定时器会触发
    printCancelTimer = setTimeout(() => {
      console.log('用户点击了【取消】');
      document.body.removeChild(this.iframe);
      printMediaQuery.removeListener(handlePrintStateChange);
    }, 300);
  } else {
    // 退出打印预览，清除定时器（说明用户确认了打印）
    clearTimeout(printCancelTimer);
    console.log('用户点击了【打印】');
    document.body.removeChild(this.iframe);
    printMediaQuery.removeListener(handlePrintStateChange);
  }
};

printMediaQuery.addListener(handlePrintStateChange);

// 触发打印
printWindow.print();

原理说明： #

• 当用户打开打印对话框时，matchMedia('print')的matches变为true，启动定时器；
• 若用户点击【取消】，对话框快速关闭，matches变回false前定时器会触发，执行取消逻辑；
• 若用户点击【打印】，浏览器会先处理打印任务，完成后才会将matches变回false，此时定时器已被清除，执行确认逻辑。

方案2：使用第三方打印库（推荐） #

如果不想自己处理跨浏览器兼容问题，可以使用成熟的打印库，比如print-js，它封装了统一的打印回调，能直接区分确认/取消操作：

// 先引入print-js（可通过CDN或本地引入）
import printJS from 'print-js';

// 直接传入图片URL执行打印
printJS({
  printable: 'imageUrl',
  type: 'image',
  onSuccess: () => {
    console.log('打印确认并完成');
  },
  onError: () => {
    console.log('打印取消或执行出错');
  }
});

注意事项： #

• 针对iframe场景，确保事件绑定在iframe的contentWindow上，而非主窗口；
• 定时器的时长可根据实际测试调整，避免因浏览器性能差异导致误判；
• 打印操作必须由用户主动交互（如按钮点击）触发，避免被浏览器拦截。

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