打印窗口残留问题
在Web应用中，当需要打印页面特定区域的内容时，一种常见的做法是使用JavaScript的window.open()方法打开一个新的空白窗口，将待打印内容写入其中，然后调用新窗口的window.print()方法触发打印对话框。然而，这种方法的一个常见痛点是，在用户完成打印操作（无论是点击“打印”、选择“取消”还是关闭打印对话框）后，这个由window.open()创建的辅助打印窗口往往会保持打开状态，造成不必要的窗口堆积，影响用户体验。用户不得不手动关闭这些窗口，这在追求流畅交互的现代Web应用中是不可接受的。
解决方案：利用window.onafterprint事件
为了解决上述问题，我们可以利用JavaScript的window.onafterprint事件。onafterprint是window对象的一个事件处理器，它会在打印操作（或打印预览）关闭后立即触发。这意味着无论用户是成功打印、取消打印，还是仅仅关闭了打印对话框，这个事件都会被调用。这为我们在打印流程结束后执行清理工作（例如关闭辅助窗口）提供了一个完美的时机。
核心原理
在新打开的打印窗口中，通过设置window.onafterprint = () => window.close();，我们指示该窗口在打印对话框关闭后，立即执行自身的关闭操作。这里的window.close()会关闭当前执行该脚本的窗口，即我们通过window.open()创建的那个辅助窗口。
代码示例
以下是一个将特定div内容打印到新窗口，并确保该窗口在打印完成后自动关闭的JavaScript函数示例。
function printDivContent(elementId) {
// 打开一个新窗口，用于承载打印内容
let popupWin = window.open('', '_blank', 'width=1080,height=595');
// 准备待打印的HTML内容和样式
let htmlToPrint = `
<style type="text/css">
/* 示例样式，可根据需要自定义 */
table th, table td {
border: 1px solid #000;
padding: 0.5em;
}
/* 可以在这里添加更多打印专用样式 */
</style>
`;
// 获取要打印的元素内容
let printContents = document.getElementById(elementId).innerHTML;
htmlToPrint += printContents;
// 获取当前页面的头部内容（如CSS链接、meta标签等），以便打印窗口继承样式
let printHead = document.head.innerHTML;
// 将内容写入新窗口
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
${printHead}
<title>打印预览</title>
</head>
<body onload="window.print();">
<!-- 核心解决方案：在打印对话框关闭后自动关闭当前窗口 -->
<script>
window.onafterprint = () => window.close();
</script>
${htmlToPrint}
</body>
</html>
`);
popupWin.document.close();
}
// 假设你的HTML中有一个id为 'page-to-print' 的div
// <div id="page-to-print">
// <h1>这是要打印的标题</h1>
// <p>这是要打印的段落内容。</p>
// <table>
// <thead><tr><th>列1</th><th>列2</th></tr></thead>
// <tbody><tr><td>数据1</td><td>数据2</td></tr></tbody>
// </table>
// </div>
// <button onclick="printDivContent('page-to-print')">打印内容</button>在上述代码中，关键的改动是在popupWin.document.write()方法中，紧随<body>标签之后嵌入了以下脚本：
<script> window.onafterprint = () => window.close(); </script>
这段代码确保了当popupWin中的打印对话框关闭时，popupWin自身会调用window.close()方法，从而实现自动关闭。
注意事项
- onafterprint的触发时机： window.onafterprint事件在打印操作完成（用户点击打印或取消）或打印预览关闭后触发，无论打印是否实际成功。这确保了窗口会在用户与打印对话框交互结束后立即关闭。
- 浏览器兼容性： onafterprint事件是Web标准的一部分，被现代主流浏览器广泛支持。
- window.close()的限制： 出于安全考虑，window.close()方法只能关闭由window.open()方法打开的窗口，或者由用户通过脚本打开但没有进行任何导航的窗口。对于用户直接打开的浏览器标签页或窗口，脚本通常无法关闭它们。在本教程的场景中，由于popupWin是由window.open()创建的，因此window.close()会正常工作。
- 脚本执行上下文： 确保window.onafterprint = () => window.close();这段代码是在你希望关闭的那个新窗口的上下文中执行的。在我们的示例中，它被直接写入了popupWin的HTML内容中，因此它在新窗口的上下文中运行。
总结
通过巧妙地利用window.onafterprint事件，我们可以优雅地解决Web打印中辅助窗口残留的问题。这种方法不仅提升了用户体验，减少了不必要的窗口干扰，也使得Web应用的打印功能更加专业和完善。在实现Web打印功能时，将此技巧融入您的代码，无疑能带来显著的改进。
