onbeforeprint and onafterprint event for jQuery (crossbrowser event)

Question

I need an event for jQuery equivalent to onbeforeprint and onafterprint on jQuery that is cross browser compatible.

I can't use @media print on CSS as I need to remove some classes from the document and add those classes back when finish printing.

possible duplicate of [Is there a way to track if a user prints a web page? ](http://stackoverflow.com/questions/2148145/is-there-a-way-to-track-if-a-user-prints-a-web-page) — Pekka, Nov 18 '10 at 11:57
I havent tried anything as I dont know any other aproach to this so far and couldn't find anything for this on the web. — , Nov 18 '10 at 12:02
@Pekka +1 for Duplicate, @Cesar +1 for half-correct comment. IE supports onbeforeprint, onafterprint - other browsers don't — Dennis G, Nov 18 '10 at 12:03
@cesar @starter interesting behavior... You share IPs and answer/accept each other's questions without a slightest hint that you know each other. And now, @Nick asks @Cesar a question, even though he isn't associated with this question, and miraculously he appears! This is very odd behavior... — , Nov 18 '10 at 15:32

score 1 · Answer 1 · edited May 23 '17 at 12:11

Why won't @media print with declarations like this work?:

.hide-on-print {
  display: none;
}

Alternatively, you can use this jquery plugin: http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/ and just set up the print document in a div and print that, however that would require a print link. It would be possible to create a div off screen and load that up with the content you want to print, and then print that div with the jquery. Blowsie's answer essentially does this in a new temporary browser window. However, this method sounds like some heavy JS lifting and will delay the performance of the print function until the javascript finishes executing. Again, all of these javascript solutions require a Print link to work--they will not work if the user does File->Print or Ctrl+P.

If you are trying to catch the Print event with JavaScript, that can only be done in IE through use of window.onBeforePrint and window.onAfterPrint, as you already know. There is currently no way to catch this event in Mozilla and Webkit browsers. For print styling they recommend @media css and do not believe in interfering with the Print functionality via javascript.

I strongly recommend the former method--the css. It's the most cross-browser compatible and the most predictable. Your styles will only be applied at print time and will not be visible in the browser, only on the printed page. Using the javascript/jquery method the user may get a flash of changing styles of content (or in Blowsie's example, see a pop-up window or worse, have popups disabled and the method fail), and suffer a poor user experience in buggy and inconsistent print functionality.

This question is a common one and has also been answered here: Javascript Event Handler for Print

Blowsie · Answer 2 · 2010-11-19T13:05:22.340

If you were to use a print function like this and you can do as you wish...

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1000,height=650');
            a.document.open("text/html");
            a.document.write('<html><head>');
            a.document.write('<link rel="stylesheet" href="css/default.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write('</head><body><br/>');
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

let me know if you need to expand on this – Blowsie Nov 19 '10 at 13:00 — Blowsie, Nov 19 '10 at 13:00

score 0 · Answer 3 · answered Oct 05 '11 at 12:33

0

Firefox 7 support onbeforeprint and onafterprint events https://developer.mozilla.org/en/DOM/DOM_event_reference

answered Oct 05 '11 at 12:33

Yogesh Agrawal

971
10
9

onbeforeprint and onafterprint event for jQuery (crossbrowser event)

3 Answers3