When trying to print part of a page, I used the following method. It successfully prints that portion of the page, however, it does not preserve the CSS effects.
<body>
<h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
<b>Div 1:</b> <a href="javascript:printDiv('printthis')">Print</a><br>
<div id="printthis" class="printthis">
<div id="div1" class="div1">This is the div1's print output</div>
<div id="divx2" class="div2">This is the div2's print output</div>
<div id="divx3" class="div3">This is the div3's print output</div>
</div>
<br><br>
<b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
<div id="div2">This is the div2's print output</div>
<br><br>
<b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>
I modified the above example found online so that it would be able to utilize the print CSS.
However, I have encountered an issue where the CSS styles are not applied when I attempt to print.
https://codepen.io/anon/pen/QOGdXv
The current printout does not reflect the font size or other properties, only displaying three lines:
This is the div1's print output
This is the div2's print output
This is the div3's print output