This post is a continuation of a series. Please look at the end of this post for more information
If you see the previous post output of the Print window, it also shows some advertisement in the preview. This is because of we have designed the page with some advertisement which is inside of the printable content area. It means the printable div container area contains the information required to print and also some unnecessary information. The following example shows how to remove the unnecessary contents from the container section of the normal page and preview to the user to print.
We can use window.onafterprint(), window.onbeforeprint() Javascript functions to invisible / remove unnecessary controls from window and print to the printer. But this two functions works in IE only. So let us implement this concept in Javascript. The next post will concentrate of using these two functions.
(Note: In this example, I created another div control and assign the innerHTML of normal page div container and then I am removing the unnecessary contents. This is because, if I remove from the normal page container directly, it will remove the normal page advertisement also. So to avoid this, I clone the div container and remove advertisement and write to the preview window.)
<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 + "</head><body>";
strContent = strContent + "<div 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]); // can also do style.display : none
}
strContent = strContent + newsDiv.innerHTML;
strContent = strContent + "</div>";
strContent = strContent + "</body>";
printWindow.document.write(strContent);
printWindow.document.close();
printWindow.focus();
}
</script> |
| Removing unnecessary contents from normal page |
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 “Removing unnecessary contents from the Normal page when Preview for Print”
Post a Comment