How to print a web page from the Dart / polymer web app
I am trying to print "what I see" in my Dart + polymer web app. I am getting a blank page in print preview (Windows). There is a header that I removed with CSS (so there is a bit of a reaction to my css! It's not quite dead).
I tried a separate print stylesheet for printing. I also tried adding the following to my main css:
@media print {
body {
font: 12pt Georgia, "Times New Roman", Times, Serif;
color: #222222;
line-height: 1.3;
}
header, footer{
display: none;
}
@page{
margin: 0.5cm;
}
}
and separating the @media {} screen
I have polymer buttons, etc and many elements (tables, lists, canvas ...) are dynamically added via code as well as Polymers + data binding templates. I understand that I only need to change the elements that should be in order to overwrite the existing styles.
So, is it possible to just add CSS for printing? Do I have to do something with the shadow house?
thank
Cheers, Steve
source to share
I struggled with this for a few hours until I thought about this: - copy the content I want to print to a new window and print that window.
Now this is a little tricky because the styles will be lost. (But in principle, this is like the best way out.
Sample code:
var prnWnd = window.open();
prnWnd.document.title = "Title of Printed Page"; //in case you print "headers"
$(document.querySelector('#head').cloneNode(true).innerHTML).appendTo(prnWnd.document.head);
$('<link rel="stylesheet" href="'+location.origin+location.pathname+'includepathtoextra.css">').appendTo(prnWnd.document.head);
$(document.querySelector('#contentToPrint')).appendTo(prnWnd.document.body);
prnWnd.print(); // bring up the print dialog
prnWnd.close(); // close the print view once the print dialog is disposed
source to share