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?

What exactly are you trying to achieve? What do you mean by "the library is great for screen but not for print"? — Alexander Pavlov, Jun 21 '12 at 13:14
What does a JavaScript library have to do with printing? The browser doesn't invoke any page scripts when printing anyway. — Pointy, Jun 21 '12 at 13:14
use window.onprint function,window.onafterprint,window.onbeforeprint — Ajay Beniwal, Jun 21 '12 at 13:14
impress.js is the library. As I say looks great on screen but renders to print looking awful — Joe, Jun 21 '12 at 13:49
Supportive information : http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/ where TJ VanToll on Jun 15th, 2012 commented more deeply the situation with onbeforeprint .. etc. — Milche Patern, Jun 11 '14 at 16:45

score 37 · Accepted Answer · edited May 23 '17 at 12:10

37

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.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 29 '13 at 23:34

Aejay

909
9
19

2

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 – Tom Pietrosanti May 09 '13 at 16:08
2

@TomPietrosanti I totally agree, but there are some things you cannot do with CSS (such as change the order of elements). See [my question](http://stackoverflow.com/questions/25030208/dom-manipulation-on-print-only). – chharvey Jul 30 '14 at 14:41
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. – Tom Pietrosanti Jul 30 '14 at 15:21
1

@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. – chharvey Jul 30 '14 at 19:47
Good point! I can definitely see that there may be times when you want the DOM order to change, not just the appearance. – Tom Pietrosanti Jul 31 '14 at 02:12
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. – Aejay Aug 05 '14 at 14:24
1

Since Chrome 63, Chrome now supports `window.onbeforeprint` and `window.onbeforeprint`. – Ullallulloo Apr 11 '18 at 14:54
Has the answer changed at all now that it's 2021? – Kellen Stuart Oct 13 '21 at 01:25

score 15 · Answer 2 · edited Jul 15 '14 at 05:24

15

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

edited Jul 15 '14 at 05:24

user229044

232,980
40
330
338

answered May 12 '14 at 13:30

Daniel K.

919
10
17

In Chrome, your "arcane" solution does work, but it happens four times. – chharvey Jul 30 '14 at 16:26
2

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. – The Muffin Man Oct 26 '14 at 16:23
2

Since Chrome 63, Chrome now supports `window.onbeforeprint` and `window.onbeforeprint`. – Ullallulloo Apr 11 '18 at 14:55

score 1 · Answer 3 · answered May 17 '22 at 14:14

I have implemented for disabling printing using window.onbeforeprint()

/*Block printing*/    
    window.onbeforeprint = (event) => {
        console.log("onbeforeprint function");
        printDiabled();
    };

    function printDiabled() {
        var headstr = " <span style='font-size: large; font - weight: bold; color: Red''>PRINT IS DISABLED</span>";

        //var oldstr = document.body.innerHTML;
        document.body.innerHTML = headstr;
    }
    /*Block printing*/

score 0 · Answer 4 · answered Jun 21 '12 at 13:18

0

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

answered Jun 21 '12 at 13:18

Ajay Beniwal

18,857
9
81
99

I tried in Chome, but it doesn't work. Although it might in IE, but IE is no good to me here. Thanks. http://stackoverflow.com/a/9920784/578667 – Joe Jun 21 '12 at 14:41
1

With a bit a hackerydoo, you can get it to work in webkit based browsers too: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/ The only one left out is Opera, but an enterprising individual could probably come up with a polyfill/hack for that as well. – Scott Greenfield Aug 13 '13 at 18:04

score 0 · Answer 5 · answered Apr 18 '16 at 11:36

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't work when they press 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!

You can also [override CTRL + P](https://stackoverflow.com/a/3680946/479156) to fire the same code/function, but that still is not 100% proof since there are more ways to print. — Ivar, Sep 09 '17 at 17:43

How to trigger javascript on print event?

5 Answers5

Linked