Question

当用户打印页面时是否可以触发javascript事件？当用户选择打印页面时，我想删除对javascript库的依赖，因为该库非常适合屏幕但不适合打印。

知道如何实现这个目标吗？

Answer 1

对于任何绊倒谷歌这个答案的人，让我试着清理一下：

正如Ajay所指出的，有两个事件被打印用于打印，但它们没有得到很好的支持;据我所知，它们仅在Internet Explorer和Firefox（6+）浏览器中受支持。那些事件是window.onbeforeprint和window.onafterprint，它们（如你所料）将在打印作业之前和之后触发。

然而，正如Joe的链接（https://stackoverflow.com/a/9920784/578667）所指出的那样，并不完全是在所有情况下如何实现它。在大多数情况下，两个事件都在对话之前触发;在其他情况下，脚本执行可能会在打印对话框中暂停，因此两个事件可能会同时触发（在对话框完成后）。

有关这两个事件的更多信息（和浏览器支持）：

https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint

https://developer.mozilla.org/en-US/docs/DOM/window.onafterprint

简短的回答：如果您希望干扰打印流程，请不要。如果你希望在打印后触发代码，它就不会像你想要的那样工作;期待糟糕的浏览器支持，并尝试优雅地降级。

Answer 2

可以通过覆盖来完成，例如window.onbeforeprint。

使用Chrome，我发现更神秘的window.matchMedia("print").addListener(function() {alert("Print Dialog open.")})也可以。

这个有争议的功能可以用来阻止用户打印页面。

我第一次在Scribd遇到过它。在那里，如果使用菜单命令打开打印对话框，页面内容将显示为灰色，并显示警告弹出消息，说明无法打印页面的原因。（注意完整分析：在该页面上，control-p也被覆盖，因此您根本无法使用它来打开打印对话框。此外，还有一个用于打印机输出的@media CSS隐藏内容;所有在Firefox上测试）。

Answer 3

如果你有一个场景，你想在打印对话框出现之前做某事或者在将文档发送到打印机队列后使用，可以使用下面的事件 window.onafterprint，window.onbeforeprint

Answer 4

对于那些来这里寻找使用Bootstrap的选项的人来说，我使用以下代码来实现时单击打印按钮。当他们按下CTRL + P时，赢了

。

$("#print_page").click(function(){
$("#print_section").addClass('visible-print-block');
window.print();
$("#print_section").removeClass('visible-print-block');})

您需要在您不想要打印的任何内容上添加隐藏式打印，然后在您要打印的位上添加一个ID（或者如果您有多个部分，则为一个类）print_section！有点hacky但它的确有效！

如何在打印事件上触发javascript？

4 个答案: