如何通过PrintJS判断用户点击打印对话框的打印或取消按钮？

你遇到的核心问题是：PrintJS的onPrintDialogClose回调无法直接通过参数判断用户是点击了打印还是取消按钮——这个回调仅在打印对话框关闭时触发，不管用户选择了哪种操作，且回调的event参数并不用来区分操作类型。

下面提供两种可行的解决方案：

方案一：结合浏览器原生打印事件 #

利用浏览器的beforeprint和afterprint原生事件，配合状态标记来近似判断操作类型：

let printTriggered = false;

// 打印对话框打开前触发
window.addEventListener('beforeprint', () => {
  printTriggered = true;
});

// 打印对话框关闭后触发
window.addEventListener('afterprint', () => {
  if (printTriggered) {
    // 这里执行打印成功后的逻辑
    console.log('用户完成打印操作');
    printTriggered = false;
  }
});

printJS({
  printable: data,
  type: 'pdf',
  base64: true,
  onPrintDialogClose: () => {
    // 重置状态，避免重复触发
    printTriggered = false;
  }
});

注意：部分浏览器在用户取消打印时也会触发afterprint，这种方案只能做近似判断，无法100%区分。

方案二：自定义PDF打印流程（更可靠） #

绕过PrintJS的封装，直接将Base64 PDF转为Blob，通过iframe加载后调用原生打印，结合上下文的afterprint事件判断：

function printBase64Pdf(base64Data) {
  // 将Base64转为Blob
  const byteChars = atob(base64Data);
  const byteArray = new Uint8Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }
  const blob = new Blob([byteArray], { type: 'application/pdf' });
  const blobUrl = URL.createObjectURL(blob);

  // 创建隐藏iframe加载PDF
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = blobUrl;
  document.body.appendChild(iframe);

  iframe.onload = () => {
    // 监听iframe内的打印完成事件
    iframe.contentWindow.addEventListener('afterprint', () => {
      // 执行打印后的逻辑
      console.log('打印流程已结束');
      // 清理资源
      document.body.removeChild(iframe);
      URL.revokeObjectURL(blobUrl);
    });
    // 触发打印
    iframe.contentWindow.print();
  };
}

// 调用打印方法
printBase64Pdf(data);

这种方式更灵活，能更精准地捕获打印对话框的关闭事件，虽然同样无法完全确定打印机是否真的成功输出，但能准确区分用户是否发起了打印操作。

补充：前端无法直接获取打印机硬件的打印成功状态，所有方案都是基于浏览器事件的近似判断，这是浏览器安全机制的限制。

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