Display page numbers on pages using CSS and print in JavaScript

phonghue
 
on Jun 23, 2019 11:50 PM
46467 Views

hello,

in the same report i try to put the number at the bottom of the page and here is my style css

<style type="text/css">
    @page {
        @bottom-right {
            content: counter(page) " of " counter(pages);
        }
    }
</style> 

at my bottom of the report, i create a label to hold the number please look.

<table>
    <tr>
        <td><p class="padding10"><asp:Label ID="Label41" runat="server" Text="Update:" Font-Size="18px"></asp:Label></p></td>
        <td><p class="padding3"><asp:Label ID="Datelbl" runat="server" Text="" Font-Size="18px"></asp:Label></p></td>
        <td><p class="padding3"><asp:Label ID="Label42" runat="server" Text="18-19" Font-Size="18px"></asp:Label></p></td> 
        <td><p class="page"><asp:Label ID="PageNumlbl" runat="server" Text=" " Font-Size="18px"></asp:Label></p></td> 
    </tr> 
</table>   

where and how do i put this code into the HTML to get it to work of the page number?

i also have another CSS code.  i try many different way to get the page number into my website, but none of them work. 

maybe i don't know how to put these code into the HTML page.  please help.

#content {
    display: table;
    page-break-after: left;
           
}
#pageFooter {
    display: table-footer-group;
}
 
#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

thanks. 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 25, 2019 07:36 AM

Hi phonghue,

Normally browsers print the page numbers by default.

The header and footer info printed on each page are under the control of the browser. All the browsers i have tried printing from have page numbering on by default.

If you want to display page number in web page refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            counter-reset: page;
        }
        #pageFooter
        {
            page-break-before: always;
            counter-increment: page;
        }
        #pageFooter:after
        {
            display: block;
            text-align: right;
            content: "Page " counter(page);
        }
        #pageFooter.first.page
        {
            page-break-before: avoid;
        }
    </style>
    <script type="text/javascript">
        function PrintPanel() {
            var panel = document.getElementById("content");
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title></title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(panel.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            setTimeout(function () {
                printWindow.print();
                printWindow.close();
            }, 500);
            return false;
        }
    </script>
</head>
<body>
    <input type="button" id="btnPrint" value="Print" onclick="return PrintPanel();" /><br />
    <div id="content">
        <div id="pageFooter">
        </div>
    </div>
</body>
</html>

Demo