How to trigger javascript on print event?

Question

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.

Any idea how to achieve this?

Solution 1

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.

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).

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.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.

Solution 2

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

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

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).

Comments

[Joe]

I tried in Chome, but it doesn't work. Although it might in IE, but IE is no good to me here. Thanks. stackoverflow.com/a/9920784/578667

[Tom Pietrosanti]

Additionally, if you are trying to alter the layout or display for print, you should be doing this with a print stylesheet (or @media print rules within your css) and not JavaScript

[Scott Greenfield]

With a bit a hackerydoo, you can get it to work in webkit based browsers too: tjvantoll.com/2012/06/15/… The only one left out is Opera, but an enterprising individual could probably come up with a polyfill/hack for that as well.

[chharvey]

@TomPietrosanti I totally agree, but there are some things you cannot do with CSS (such as change the order of elements). See my question.

[Tom Pietrosanti]

You can change the order (to a degree) if you can use flexbox, but otherwise that's true. If you don't need JS, I would avoid it - it can lead so some very strange bugs.

[chharvey]

In Chrome, your "arcane" solution does work, but it happens four times.

[chharvey]

@TomPietrosanti Flexboxes change the appearance of the order, however the DOM tree stays the same. Incidentally, I do want to keep the DOM the same while changing the appearance, so a flexbox seems to be the solution, and a far better one than using JS.

[Tom Pietrosanti]

Good point! I can definitely see that there may be times when you want the DOM order to change, not just the appearance.

[Aejay]

Compatibility is something to keep in mind if you're going the flexbox route. If your users end up trying to print from a browser that doesn't support that feature, make sure it still looks acceptable for them. If you're using a feature detection library (like Modernizr), you should be able to check for parent classes like .flexbox (or .flexbox-legacy if you want to fall back on that syntax), and provide alternate styles for .no-flexbox for users who don't have all that fancy bling in their browsers.

[The Muffin Man]

I imagine if you have multiple print styles or print stylesheets it would fire for as many as you have. When I run this code with no print styles it runs once.

[Ivar]

You can also override CTRL + P to fire the same code/function, but that still is not 100% proof since there are more ways to print.

[Ullallulloo]

Since Chrome 63, Chrome now supports window.onbeforeprint and window.onbeforeprint.

[Ullallulloo]

Since Chrome 63, Chrome now supports window.onbeforeprint and window.onbeforeprint.

[Kellen Stuart]

Has the answer changed at all now that it's 2021?