How to trigger javascript on print event?
Clash Royale CLAN TAG#URR8PPP
How to trigger javascript on print event?
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 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 : tjvantoll.com/2012/06/15/… where TJ VanToll on Jun 15th, 2012 commented more deeply the situation with onbeforeprint .. etc.
– Milche Patern
Jun 11 '14 at 16:45
4 Answers
4
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.
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 9 '13 at 16:08
@media print
@TomPietrosanti I totally agree, but there are some things you cannot do with CSS (such as change the order of elements). See my question.
– 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
@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 2:12
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.
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).
In Chrome, your "arcane" solution does work, but it happens four times.
– chharvey
Jul 30 '14 at 16:26
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
Since Chrome 63, Chrome now supports
window.onbeforeprint and window.onbeforeprint.– Ullallulloo
Apr 11 at 14:55
window.onbeforeprint
window.onbeforeprint
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
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
– Joe
Jun 21 '12 at 14:41
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.
– Scott Greenfield
Aug 13 '13 at 18:04
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 to fire the same code/function, but that still is not 100% proof since there are more ways to print.
– Ivar
Sep 9 '17 at 17:43
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
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