如何在jsPDF调用autoprint()后实现afterprint回调功能？

jsPDF自带的autoprint()方法没有提供内置的打印完成/取消回调接口，原因是它内部创建的打印上下文（iframe/新窗口）没有对外暴露事件监听的入口。以下是两种可行的解决办法：

方法一：自行封装打印逻辑（推荐） #

完全控制PDF加载和打印流程，直接监听打印上下文的afterprint事件，可靠性更高：

function printPDFWithCallback(doc, callback) {
  // 创建隐藏的iframe用于加载PDF
  const iframe = document.createElement('iframe');
  iframe.style.position = 'absolute';
  iframe.style.width = '0';
  iframe.style.height = '0';
  iframe.style.border = 'none';
  document.body.appendChild(iframe);

  const iframeWindow = iframe.contentWindow;
  // 写入PDF内容到iframe
  iframeWindow.document.open();
  iframeWindow.document.write(`
    <!DOCTYPE html>
    <html>
      <body style="margin:0;">
        <embed 
          width="100%" 
          height="100%" 
          src="${doc.output('datauristring')}" 
          type="application/pdf"
        >
      </body>
    </html>
  `);
  iframeWindow.document.close();

  // 定义打印完成后的处理逻辑
  const handleAfterPrint = () => {
    // 执行自定义回调
    callback();
    // 清理事件监听和DOM元素
    iframeWindow.removeEventListener('afterprint', handleAfterPrint);
    document.body.removeChild(iframe);
  };

  // 绑定afterprint事件
  iframeWindow.addEventListener('afterprint', handleAfterPrint);

  // 等待PDF加载完成后触发打印
  iframe.onload = () => {
    iframeWindow.print();
  };
}

// 使用示例
const doc = new jsPDF();
doc.text('测试内容', 10, 10);
printPDFWithCallback(doc, () => {
  console.log('打印流程已结束（完成或取消）');
  // 在这里执行你的业务逻辑
});

方法二：监听全局afterprint事件 #

如果不想修改打印流程，可以在调用autoprint()前绑定全局的afterprint事件，缺点是无法区分当前回调是否对应本次jsPDF打印：

const doc = new jsPDF();
doc.text('测试内容', 10, 10);

// 绑定全局打印完成事件
const afterPrintHandler = () => {
  console.log('打印流程已结束（完成或取消）');
  // 执行完回调后移除监听，避免重复触发
  window.removeEventListener('afterprint', afterPrintHandler);
};
window.addEventListener('afterprint', afterPrintHandler);

// 触发自动打印
doc.autoprint();

注意事项 #

• 浏览器的afterprint事件无法区分用户是点击了“打印”还是“取消”，这是浏览器API的限制，所有基于此的方案都只能捕获打印对话框关闭的动作。
• 部分浏览器可能需要等待PDF完全加载才能触发打印，所以封装逻辑里的onload监听很有必要。

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