JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<p>show this, in print preview</p>
<div class="noprint">
dont show this, in print preview!
</div>
</div>
<a id="btnPrint" runat="server" Text="Print" onclick="PrintPanel();" style="cursor:pointer;">print</a>
CSS
.noprint
{
color:red;
}
@media print {
p
{
color:green;
}
.noprint {
display: none;
}
}
JavaScript
function PrintPanel() {
var panel = document.getElementById("content");
var el = document.querySelector( '.noprint' );
panel.removeChild(el);
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 500);
return false;
}