4

I want to override the behavior of window.print, like if the dom contains a table I don't want certain rows to be printed.

I referred to the below stack overflow answer on how to hack the javacript event, but not sure how I can update the dom content for the print JavaScript: Overriding alert()

Can anyone throw some light into this.

Thanks.

Community
  • 1
  • 1
Akash
  • 71
  • 1
  • 11

2 Answers2

5

You can run your own special JavaScript by overriding the window.print function. However, this is a different flow than someone clicking print from the navigation bar.

window.print is the print flow as launched by the application.

var oldPrintFunction = window.print;

window.print = function () {
    console.log('Gonna do some special stuff');
    oldPrintFunction();
};

Working with user driven print events and programmed print events:

I had to go look this up as I had something I wrote a long time ago that did something similar, and it seems that I found it. This code watches for the media change to go to print.

function beforePrint() {
    console.log('Do something special before print');
}

function afterPrint() {
    console.log('Do something after print');
}

if (window.matchMedia) {
    window.matchMedia('print').addListener(function (mql) {
        if (mql.matches) {
            beforePrint();
        }
        else {
            afterPrint();
        }
    });
}
// For IE, does not attach in browsers that do not support these events
window.addEventListener('beforeprint', beforePrint, false);
window.addEventListener('afterprint', afterPrint, false);

This will run whatever is in the beforePrint function for calling window.print(), or the user chooses to print using a browser flow (command+p, file->print), etc.

Please note: The afterprint has a bug in Chrome, see my StackOverflow question here

Community
  • 1
  • 1
KevBot
  • 17,900
  • 5
  • 50
  • 68
  • This is the approach I was going to suggest. – Feathercrown Nov 14 '16 at 21:39
  • Can i access any variable inside window.print which contains all the values inside the dom which i can alter and later pass it to print – Akash Nov 14 '16 at 21:47
  • @Akash, no, you can't read into the print stream. However, you could run down the DOM that is going to be printed, and set the rows or whatever you don't want to be printed to `display: none`, and then when the print job finishes, run over those rows again and reset the display. I'll add how to watch for the print job to be "finished" – KevBot Nov 14 '16 at 21:50
  • Thanks @KevBot for the detailed response. – Akash Nov 14 '16 at 22:03
3

use media queries to add styles that will only be applied to the printed version of the page...

@media print {
   #idOdTableNotToPrint{ display:none; }
}

This will hide the table with id of idOdTableNotToPrint only when the page is printed.

Or if you want to create a whole new stylesheet for it, you can specify that the CSS is for print only in the <link> tag by adding a media='print' attribute:

<link rel="stylesheet" href="css/print_styles.css" media='print'/>
I wrestled a bear once.
  • 22,983
  • 19
  • 69
  • 116
  • Thanks, it helps a lot, Since i am rendering my dom using react based on certain conditions, need to work on a logic on how to dynamically apply it. Thanks for the help. :) – Akash Nov 14 '16 at 21:40