html – Text align not working under div using javascript print button
html – Text align not working under div using javascript print button
Have a look at the following to point you in the right direction. Instead of changing the entire page and then reverting it, open a new window to do the print. This will stop any potentially nasty bugs appearing when revert the page. Also having 2 different class names for non-print and print DIVs may be useful. You can put these in an external CSS file and then add the CSS link to the new window aswell.
<html xmlns=http://www.w3.org/1999/xhtml>
<head runat=server>
<title>
</title>
<style>
.myDiv {
border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px;
}
</style>
<script type=text/javascript>
function printDiv(divID) {
var div = document.getElementById(divID).outerHTML;
var mywindow = window.open(, Print Contents);
mywindow.document.write(<html><head><title>Print Contents</title>);
mywindow.document.write(<style>.myDiv {border: 1px dotted black; text-align: center; width: 100%;}</style>);
mywindow.document.write(</head><body>);
mywindow.document.write(div);
mywindow.document.write(</body></html>);
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
</script>
</head>
<body>
<form id=form1>
<div id=DivForPrint class=myDiv>
<span style=font-size: 10pt; font-weight: bold; font-family: Arial>Hello,
<br />
This is <span style=color: #0090CB>Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type=button value=Print onclick=javascript: printDiv(DivForPrint) style=width: 80px; height: 30px; />
</form>
</body>
</html>