<script type="text/javascript">
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var mywindow = window.open('', 'mydiv', 'height=550,width=750');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="~/Content/Site.css" type="text/css" media="print" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
</script>My JavaScript code successfully prints the DIV, but I am facing an issue with loading CSS. To test this, I set a pink color which is not reflecting in the print output. Below is my CSS:
@media print {
.mydiv {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
color:pink;
}
}