Print ASP.Net page with Header and Footer using JavaScript

Sunilmantr
 
on Apr 19, 2021 05:22 AM
1010 Views

Hi,

Which tools is good and free for asp.net for document design like invoice and other printable format like crystal report.

I want my page heading and footer also in every page

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 24, 2021 03:34 AM

Hi Sunilmantr,

Check this example. Now please take its reference and correct your code.

HTML

<asp:Panel ID="pnlHeader" runat="server">
    <h3>Welcome to ASPSnippets.</h3>
</asp:Panel>
<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>
    <hr />
    <table>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Country</td>
        </tr>
        <tr>
            <td>1</td>
            <td>John Hammond</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mudassar Khan</td>
            <td>India</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Suzanne Mathews</td>
            <td>France</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Robert Schidner</td>
            <td>Russia</td>
        </tr>
    </table>
</asp:Panel>
<br />
<asp:Button ID="btnPrint" runat="server" Text="Print" OnClientClick="return PrintPanel();" />
<br />
<asp:Panel ID="pnlFooter" runat="server">
    <h4>&copy;<%=DateTime.Now.Year %></h4>
</asp:Panel>
<script type="text/javascript">
    function PrintPanel() {
        var panelHeader = document.getElementById("<%=pnlHeader.ClientID %>");
        var panelContent = document.getElementById("<%=pnlContents.ClientID %>");
        var panelFooter = document.getElementById("<%=pnlFooter.ClientID %>");
        var printWindow = window.open('', '', 'height=400,width=800');
        printWindow.document.write('<html><head><title>Invoice Report</title>');
        printWindow.document.write('</head><body >');
        printWindow.document.write(panelHeader.innerHTML);
        printWindow.document.write(panelContent.innerHTML);
        printWindow.document.write(panelFooter.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        setTimeout(function () {
            printWindow.print();
        }, 500);
        return false;
    }
</script>

Print Preview