Monday, 17 February 2014

Print Specific part of Web page in ASP.NET

In this short article I will explain how to print specific (particular) part of web page in ASP.Net using C# and VB.Net.

The idea is to place the contents to be printed inside an ASP.Net Panel control and then print the contents of the Panel control.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type = "text/javascript">
        function PrintPanel() {
            var panel = document.getElementById("<%=pnlContents.ClientID %>");
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(panel.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            setTimeout(function () {
                printWindow.print();
            }, 500);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat = "server">
    <asp:Panel id="pnlContents" runat = "server">
        <span style="font-size: 10pt; font-weight:bold; font-family: Arial">Hello,
            <br />
            This is <span style="color: #18B5F0">Mudassar Khan</span>.<br />
            Hoping that you are enjoying my articles!</span>
    </asp:Panel>
    <br />
    <asp:Button ID="btnPrint" runat="server" Text="Print" OnClientClick = "return PrintPanel();" />
    </form>
</body>
</html>
In the above HTML Markup I have an ASP.Net Panel control pnlContents whose contents needs to be printed and an ASP.Net Button btnPrint which has an OnClientClick event which will call the JavaScript method PrintPanel() to print the contents of the Panel.

No comments:

Post a Comment