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

How to trigger javascript on print event?

提问by Joe

Is it possible to trigger a javascript event when a user prints a page? I would like to remove a dependancy on a javascript library, when a user opts to print a page, as the library is great for screen but not for print.

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

Any idea how to achieve this?

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

回答by Aejay

For anyone stumbling upon this answer from Google, let me try to clear things up:

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

As Ajay pointed out, there are two events which are fired for printing, but they are not well-supported; as far as I have read, they are only supported in Internet Explorer and Firefox (6+) browsers. Those events are window.onbeforeprint and window.onafterprint, which (as you'd expect) will fire before and after the print job.

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

However, as pointed out in Joe's link (https://stackoverflow.com/a/9920784/578667), that's not exactly how it is implemented in all cases. In most cases, both events fire before the dialog; in others, script execution might be halted during the print dialog, so both events may fire at the same time (after the dialog has been completed).

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

For more information (and browser support) for these two events:

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

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

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

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

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

The short answer: if you're hoping to interfere with the print flow, don't. If you're hoping to trigger code after printing, it's not going to work how you're wanting; expect poor browser support, and try to degrade gracefully.

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

回答by Daniel K.

It can be done by overwriting, e.g., window.onbeforeprint.

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

Using Chrome, I found that the more arcane window.matchMedia("print").addListener(function() {alert("Print Dialog open.")})also works.

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

This debatable feature can be used in order to deter users from printing a page.

此有争议的功能可用于阻止用户打印页面。

I've encountered it the first time on Scribd. There, if you open the print dialog using the menu command, the page content will be greyed out and a warning pop-over message appears explaining why you can not print the page. (Note for complete analysis: on that page, control-p is also overriden so you can not use it to open the print dialog at all. Additionally, there is a @media CSS for printer output that hides the content; all tested on Firefox).

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

回答by Ed Wade

For anyone coming here looking for an option using Bootstrap as I was, I used the following code to achieve this when a print button is clicked. This won'twork when they press CTRL + P.

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

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

You need to add hidden-print to anything you don't want printed and then add an ID (or a class if you have more than one section) of print_section to the bit you want printed! Bit hacky but it works!

您需要将隐藏打印添加到您不想打印的任何内容，然后将 print_section 的 ID（或类，如果您有多个部分）添加到您要打印的位！有点hacky，但它有效！

回答by Ajay Beniwal

if you have a scenario where u want to do something before print dialog appears or just after the document is sent to printer queue use can use the below events window.onafterprint , window.onbeforeprint

如果您想在打印对话框出现之前或在文档发送到打印机队列之后执行某些操作，可以使用以下事件 window.onafterprint , window.onbeforeprint