Window.onbeforeprint and Window.onafterprint get fired at the same time

Question

I have defined onbeforeprint and I modify my html code and now once I finish printing that is on select of print button I want the onafterprint to be fired but it does not.

Instead when I press the Control + Print button the onbeforeprint is fired first and then the onafterprint event and then print dialog is shown.

Is there any way I could in some way do changes to my html after the Print button is clicked?

Am using IE -9 browser and the code is as follows:

Code

<script type="text/javascript">
    window.onbeforeprint = function () {
        alert('Hello');
    }
    window.onafterprint = function () {
        alert('Bye');
    }
</script>

which browser are you using? can you post a little of your javasript code? — antonjs, Mar 29 '12 at 06:54

score 3 · Accepted Answer · answered Mar 29 '12 at 07:21

3

onbeforeprint fired before dialog appears and allows one to change html and so on.

onafterprint is fired just before dialog appears. It is not even possible to know, whether document was actually printed or user canceled it. Needless to say about when printing finished (if started at all).

Again: no event is available to track anything happened in print dialog, i.e. answer to your question is no.

Moreover, I hope what your need will never be implemented, cause this allows to frustrate user. He/she asks to print one document, but got something different.

answered Mar 29 '12 at 07:21

kirilloid

14,011
6
38
52

3

I have to disagree with your last comment. Sometimes there is useless html on the page for printing. For example, say I have a page full of tables, a side nav menu, and some buttons. Obviously, when the user goes to print this page they are trying to print out those tables. Even further, say you have some DOM elements controlled by JavaScript that you want to show during printing. If the user doesn't want them all they can select which pages they want to print, but this saves them from going through and showing each element by clicking the button or whatever is associated with it. – Justin Jul 29 '16 at 20:27
2

It seems to me that Firefox (88) and Chrome (90 smth) have totally different behaviour: Chrome will fire "afterprint" after cancelling/printing while Firefox will call it after the dialog opened. According to the doc (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint), Chrome is right. – Eric Burel Sep 02 '21 at 13:06

score 2 · Answer 2 · answered Sep 22 '20 at 23:22

I ran into this same issue trying to use the onafterprint event, even in modern browsers.

Based on one of the other answers here, I was able to come up with this solution. It let's me close the window after the print dialog is closed:

// When the new window opens, immediately launch a print command,
// then queue up a window close action that will hang while the print dialog is still open.
// So far works in every browser tested(2020-09-22): IE/Chrome/Edge/Firefox
window.print();
setTimeout(function () {
    window.close(); // Replace this line with your own 'afterprint' logic.
}, 2000);

score -1 · Answer 3 · answered May 21 '14 at 19:46

Yes, you can, no catch. I have thus implemented in a professional application. Print in Explorer, Firefox, all

window.onload = PrintMe;

function PrintMe() {
    window.print();
    setTimeout(function () {
    alert("OK");
// Here you code, for example  __doPostBack('ReturnPrint', '');
    }, 2000);
}

Window.onbeforeprint and Window.onafterprint get fired at the same time

3 Answers3

Linked