如何实现JS无阻塞式打印并关闭窗口且避免应用阻塞？

这个问题我之前做打印功能时也踩过一模一样的坑，你的核心痛点在于同步执行的打印逻辑卡死了主应用的主线程，而且空白窗口的DOMContentLoaded事件没触发，是因为新开的空窗口没有完整的HTML结构，浏览器根本不会触发这个加载事件。下面给你几个实用的解决方案：

核心思路 #

1. 避免同步阻塞：把打印操作丢到异步队列里，让主应用能继续响应其他操作
2. 确保元素渲染：保证要打印的元素已经加载完成再调用打印
3. 精准关闭窗口：用afterprint事件监听打印完成时机，而不是同步硬关窗口

方案一：完善打印窗口HTML结构（推荐） #

给打印窗口写入完整的HTML文档，确保DOM环境正常，同时用afterprint事件控制窗口关闭：

// 新开空白打印窗口
const printWin = window.open('', '_blank');

// 写入完整HTML结构，让浏览器能正常触发DOM加载流程
printWin.document.write(`
  <!DOCTYPE html>
  <html>
    <head>
      <title>打印预览</title>
      <!-- 这里可以添加打印专用的CSS，比如调整边距、隐藏无关元素 -->
      <style>
        body { margin: 0; padding: 20px; }
        @media print {
          /* 自定义打印样式 */
        }
      </style>
    </head>
    <body></body>
  </html>
`);
// 必须调用document.close()，否则浏览器会一直等待输入，DOM不会完成渲染
printWin.document.close();

// 监听打印窗口的DOM加载完成事件
printWin.document.addEventListener('DOMContentLoaded', () => {
  // 插入需要打印的元素
  printWin.document.body.appendChild(el);
  
  // 打印对话框关闭后（不管用户是打印还是取消）触发这个事件
  printWin.addEventListener('afterprint', () => {
    printWin.close();
  });
  
  // 异步执行打印，释放主应用的主线程
  setTimeout(() => {
    printWin.focus(); // 确保打印窗口获得焦点，避免打印对话框被遮挡
    printWin.print();
  }, 0);
});

方案二：简化版（无需复杂HTML结构） #

如果你的打印元素不需要额外样式或完整HTML结构，可以用requestAnimationFrame确保元素渲染完成，再异步触发打印：

const printWin = window.open('', '_blank');
// 直接插入要打印的元素
printWin.document.body.appendChild(el);

// 用requestAnimationFrame确保元素已经被渲染到页面上
printWin.requestAnimationFrame(() => {
  // 监听打印完成事件
  printWin.addEventListener('afterprint', () => {
    printWin.close();
  });
  
  // 异步执行打印，避免阻塞主应用
  setTimeout(() => {
    printWin.focus();
    printWin.print();
  }, 0);
});

关键细节解释 #

• 为什么原来的DOMContentLoaded没触发？：新开的空白窗口默认没有任何HTML内容，浏览器认为DOM已经"加载完成"，但实际上没有完整的文档结构，所以不会触发该事件。写入完整HTML并调用document.close()后，浏览器才会走完正常的DOM渲染流程。
• 为什么要用afterprint？：print()是同步方法，在用户关闭打印对话框前会死死卡住当前线程，但afterprint事件会在打印操作（包括取消打印）完成后异步触发，能精准控制窗口关闭的时机。
• setTimeout(() => {}, 0)的作用？：把打印操作放到事件循环的下一轮执行，让主应用的主线程先处理完当前任务，彻底避免出现阻塞卡顿的情况。

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