HTML中打印文档后执行脚本
在HTML中，我们可以通过JavaScript语言来操纵页面，并且在页面中插入脚本。当然，还有一种情况，就是我们需要在用户打印页面后执行某些操作，例如打印后提示用户是否需要保存文档。
1. 打印事件
在JavaScript中，我们可以使用window.print()方法来执行打印操作。当用户点击浏览器中的打印按钮或者使用快捷键进行打印时，会触发window.print()方法。
因此，我们可以利用window.print()方法来绑定一个打印事件，并在该事件中执行需要的操作。
2. 打印后事件
如果我们想在用户打印页面后执行某些操作，可以使用window.onafterprint事件。
该事件会在用户完成打印操作后触发，我们可以在该事件中添加需要执行的脚本。
例如，我们可以通过以下代码在用户打印页面后弹出一个提示框：
window.onafterprint = function() {
alert("完成打印！");
}
3. 组合使用
当然，如果我们想在用户打印页面后执行某些操作，可以同时使用打印事件和打印后事件。
在下面的例子中，我们在打印事件中添加一个标记，用于标识页面是否正在打印。在打印后事件中，我们可以根据该标记来执行相应的操作。
window.onbeforeprint = function() {
// 添加一个“正在打印”的标记
document.body.setAttribute("data-printing", "yes");
}
window.onafterprint = function() {
// 移除“正在打印”的标记
document.body.removeAttribute("data-printing");
// 根据标记执行相应的操作
if (document.body.getAttribute("data-save") == "yes") {
alert("保存文档！");
} else {
alert("完成打印！");
}
}
在上述代码中，我们还使用了document.body.setAttribute和document.body.removeAttribute方法来添加和移除标记。
4. 打印样式
当我们在页面中生成一个打印样式时，该样式只会在打印时生效。如果要在页面中预览样式，可以将样式表放在media="print"的<link>元素中。
以下是一个示例，演示了如何在页面中生成一个打印样式表：
<style media="print">
.print-header {
display: block;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.print-footer {
display: block;
text-align: center;
font-size: 14px;
margin-top: 20px;
}
</style>
在上述代码中，我们将样式表放在media="print"的<style>元素中，以确保该样式表只在打印时生效。
5. 练习
现在，让我们来尝试编写一个JavaScript程序，展示如何在用户打印页面后弹出一个提示框，并询问用户是否保存文档。
以下是完整代码：
HTML中打印文档后执行脚本
<style media="print">
.print-header {
display: block;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.print-footer {
display: block;
text-align: center;
font-size: 14px;
margin-top: 20px;
}
</style>
<div class="print-header">HTML中打印文档后执行脚本</div>
<div class="print-body">
<p>在HTML中，我们可以通过JavaScript语言来操纵页面，并且在页面中插入脚本。当然，还有一种情况，就是我们需要在用户打印页面后执行某些操作，例如打印后提示用户是否需要保存文档。</p>
<p>如果我们想在用户打印页面后执行某些操作，可以使用onafterprint事件。该事件会在用户完成打印操作后触发，我们可以在该事件中添加需要执行的脚本。例如，我们可以通过以下代码在用户打印页面后弹出一个提示框：</p>
<pre><code>
window.onafterprint = function() {
if (confirm("你是否需要保存文档？")) {
alert("文档已保存！");
} else {
alert("完成打印！");
}
}
</code></pre>
</div>
<div class="print-footer">www.example.com</div>
<script>
window.onbeforeprint = function() {
document.body.setAttribute("data-printing", "yes");
}
window.onafterprint = function() {
document.body.removeAttribute("data-printing");
if (document.body.getAttribute("data-save") == "yes") {
alert("文档已保存！");
} else {
alert("完成打印！");
}
}
</script>
</html>
在上述代码中，我们在window.onafterprint事件中添加了一个弹出框，询问用户是否需要保存文档。
如果用户点击了“确定”按钮，则在window.onafterprint事件中弹出另一个提示框，告诉用户文档已保存。如果用户点击了“取消”按钮，则在window.onafterprint事件中弹出另一个提示框，告诉用户已完成打印。
我们还在<body>元素中添加了一个名为“print-header”的<div>元素，以及一个名为“print-footer”的<div>元素，用于演示如何在打印时添加页眉和页脚。
6. 总结
在HTML中打印文档后执行脚本，可以通过使用 JavaScript 来实现。我们可以使用window.print()方法来绑定打印事件，使用window.onafterprint事件来执行打印后操作。
我们还可以添加打印样式表，以控制打印时的样式。