I'm having trouble when trying to print a web page using JavaScript. The window.open() function does not load the style sheets of the same file.
Here is my JavaScript code:
function Print() {
printWindow = window.open("", "mywindow", "location=1,status=1,scrollbars=1,width=600,height=600");
printWindow.document.write("<div style='width:100%;'>");
printWindow.document.write("<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />");
printWindow.document.write("<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />");
printWindow.document.write("<select id='cboprintSize' onchange='document.getElementById(\"divContainer\").style.width = document.getElementById(\"cboprintSize\").value + \"px\";'><option value=\"300\">A4</option><option value=\"500\">A5</option></select>");
printWindow.document.write("<div id='divContainer' style='width:500; height:700; background-color:white'>");
printWindow.document.write("<table width='100%'><tr><td>");
printWindow.document.write(document.getElementById('printForm').innerHTML);
printWindow.document.write("</td></tr><table>");
printWindow.document.write("</div>");
printWindow.document.write("</div>");
printWindow.document.close();
printWindow.focus();
}
And here is the ASP.NET form code:
<input type="button" id="btnCall" onclick="Print()" value="Print" />
<form runat="server" id="printForm">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/incident1.png" alt="First Line Incident" title="First Line Incident" align="absmiddle" class="cardIcon" border="0">
</td><td width="100%"><span class="title"> PRI1307-006</span></td>
<td align="right" nowrap>
<a href="#" id="public_edit">
<span class="value">
<img src="images/edit.png" class="iconNavBar" style="border: 0px;" title="Edit" width="24" height="24"></span>
</a>
<a href="#" dynamicMenu="print" target="_blank">
<span class="value">
<img src="images/icon_printable_version.png" class="iconNavBar" style="border: 0px;" title="Printable version" width="24" height="24">
</span></a></td>
</tr>
</table>
</form>