30

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

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

4

4 回答 4

36

对于任何偶然发现谷歌这个答案的人，让我试着澄清一下：

正如 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

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

于 2013-03-29T23:34:16.583 回答
15

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

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

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

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

于 2014-05-12T13:30:38.683 回答
0

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

于 2012-06-21T13:18:56.120 回答
0

对于像我一样来这里寻找使用 Bootstrap 选项的人，我使用以下代码在单击打印按钮时实现此目的。当他们按 CTRL + P 时，这将不起作用。

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

您需要将 hidden-print 添加到您不想打印的任何内容，然后将 print_section 的 ID（或一个类，如果您有多个部分）添加到您想要打印的位！有点hacky，但它的工作原理！

于 2016-04-18T11:36:00.173 回答