When attempting to print an HTML element using window.print();, the original style is not preserved. How can this issue be resolved?
printInvoice() {
var mywindow = window.open("", "PRINT");
mywindow.document.write("<html>");
mywindow.document.write("<body>");
mywindow.document.write($("#html2pdf")[0].outerHTML);
mywindow.document.write("</body></html>");
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
}
CSS for printing:
@media print {
#invoice {
padding: 30px;
}
.invoice {
position: relative;
background-color: #fff;
min-height: 680px;
padding: 15px;
}
.invoice header {
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #3989c6;
}
}