Wednesday, 16 February 2011

Removing unnecessary contents from the Normal page when Preview for Print

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 ="", "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>";
Removing unnecessary contents from normal page

download the source code here

0 Responses to “Removing unnecessary contents from the Normal page when Preview for Print”

Post a Comment