How to show preview before printing a Web Page

Tweet

This post is a continuation of a series. Please look at the end of this post for more information

We will take the same example explained in previous post and expand it. When a user clicks the Print button the system required to show a preview popup window. That popup window should also contains two buttons (Print – to show Print dialog, Cancel – to close the popup).

Another point to note here is, normally when we print we required to print some part of the page. Normally we don’t print header, footer, left menu, right sections (which are common across the pages). We required to print only the important information which are mostly between the sections mentioned.

To achieve this, we required to declare a div control with some Id. This control should be the container for the information which is required to print. When we write the printing information to the popup window, we can only write the innerHTML of the div container declared (In our example, we are print only the news and not header, footer, menu etc.,).

Include a Javascript on the page

<script language="javascript" type="text/javascript">
    function PrintContent()
    {
        printWindow = window.open("", "mywindow", "location=0,status=0,scrollbars=1");
        printWindow.document.write("<div style='width:100%;text-align:left;'>");
        printWindow.document.write("<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />");
        printWindow.document.write("<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />");
        printWindow.document.write(document.getElementById('news').innerHTML);
        printWindow.document.write("</div>");
        printWindow.document.close();
        printWindow.focus();
    }
</script>

and modify the print button (43th line - previous post example) to call the Javascript function

<li><a href="#" onclick="PrintContent()">Print</a></li>

The output of clikcing the print button will be as following figure

Print with Preview

download the source code here

The other links on How to print Web Page Using Javascript:

1. Web page printing using Javascript
2. How to show Preview before Printing a Page using Javascript
3. Appling style for the Print Preview using Javascript
4. Removing unnecessary contents from the Normal page when Preview for Print
5. Using window.onafterprint(), window.onbeforeprint() Javascript functions (IE Only)
6. How to print Content Page Information from Master Page using Javascript
7. Printing different parts of page using Javascript when Master Page, User Controls used
8. Printing Single Page GridView with Preview
9. Printing Multi Page GridView with Preview - 1
10. Printing Multi Page GridView with Preview - 2
11. Adding & Removing GridView columns in the Print Preview using JavaScript