This post is a continuation of a series. Please look at the end of this post for more information
In this example, we will looks at the printed output format at the printer. As we are previewing the content with Print and Cancel buttons, the printer also prints that two buttons in the paper. But we don’t required to print this buttons are this is for popup functionalities. So to remove this buttons, we required to use window.onafterprint(), window.onbeforeprint() Javascript functions. But this works only with IE browser (Note : IE 9.0 is not working with this event).
As we are invisible the controls before printing, we can do the same for other controls using onafterprint(), onbeforeprint() functions before printing and and after printing we can visible it. But both this function will work only in IE, so better to handle everything in JavaScript.
<script language="javascript" type="text/javascript">
function PrintContent() {
printWindow = window.open("", "mywindow", "location=0,status=0,scrollbars=1,resizable=1");
var strContent = "<html><head>";
strContent = strContent + "<title>Print Preview</title>";
strContent = strContent + "<link href=\"App_Themes/Default/Default.css\" type=\"text/css\" rel=\"stylesheet\" />";
strContent = strContent + "<script type=\"text/javascript\" language=\"javascript\">";
strContent = strContent + "function window.onafterprint(){document.getElementById('buttons').style.display = '';}";
strContent = strContent + "function window.onbeforeprint(){document.getElementById('buttons').style.display = 'none';}";
strContent = strContent + "</scr" + "ipt>";
strContent = strContent + "</head><body>";
strContent = strContent + "<div id='buttons' style='width:100%;text-align:right;'>";
strContent = strContent + "<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />";
strContent = strContent + "<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />";
strContent = strContent + "</div>";
strContent = strContent + "<div style='width:100%;'>";
var newsDiv = document.createElement('div');
newsDiv.innerHTML = document.getElementById('news').innerHTML;
for (var i = 0; i < newsDiv.childNodes.length; i++) {
if (newsDiv.childNodes[i].id == 'newsRelatedAd')
newsDiv.removeChild(newsDiv.childNodes[i]);
}
strContent = strContent + newsDiv.innerHTML;
strContent = strContent + "</div>";
strContent = strContent + "</body>";
printWindow.document.write(strContent);
printWindow.document.close();
printWindow.focus();
}
</script>The output of the printed content would be -
 |
| Printed content (XPS document) by removing the Print, Cancel buttons |
download the source code here
The other links on How to print Web Page Using Javascript:
- Web page printing using Javascript
- How to show Preview before Printing a Page using Javascript
- Appling style for the Print Preview using Javascript
- Removing unnecessary contents from the Normal page when Preview for Print
- Using window.onafterprint(), window.onbeforeprint() Javascript functions (IE Only)
- How to print Content Page Information from Master Page using Javascript
- Printing different parts of page using Javascript when Master Page, User Controls used
- Printing Single Page GridView with Preview
- Printing Multi Page GridView with Preview - 1
- Printing Multi Page GridView with Preview - 2
- Adding & Removing GridView columns in the Print Preview using JavaScript
0 Responses to “Using window.onafterprint(), window.onbeforeprint() Javascript functions (IE Only)”
Post a Comment