@media print (or @media not print) in Css ignored

When using @media print and @media not print in the CSS in order to get rid of color, images … the generated pdf will ignore these.

On https://jsfiddle.net/wb2tgm6f/l the generated pdf still includes the

as visible text

[cwallen]

This isn’t printing, so the print media query won’t get triggered. The workaround I’ve used is through the css preprocessor I’m using, I duplicate the print styles on both @media print and body.print. Then I add the print class to the body right before triggering html2pdf, and then removing it right after.

[pietrogregorini]

Okay, forgot it… I had to run the removal of class after html2pdf function had completely run.

var source = document.getElementById('body');
source.classList.add('print');
html2pdf(source, {
     filename: 'Test.pdf',
     image: { type: 'jpeg', quality: 1 },
     html2canvas: { scale: 2 },
     jsPDF: { unit: 'mm', format: 'A4', orientation: 'landscape', putOnlyUsedFonts: true }
}).then(function(){
     source.classList.remove('print');
});

It’s not perfect (there’s a little subtle change in layout, of course) but whatever… 😉