Thursday, 17 February 2011

Using window.onafterprint(), window.onbeforeprint() Javascript functions (IE Only)

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 ="", "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')
        strContent = strContent + newsDiv.innerHTML;
        strContent = strContent + "</div>";
        strContent = strContent + "</body>";

The output of the printed content would be -
Printed content (XPS document) by removing the Print, Cancel buttons

download the source code here

0 Responses to “Using window.onafterprint(), window.onbeforeprint() Javascript functions (IE Only)”

Post a Comment