helloin the same report i try to put the number at the bottom of the page and here is my style cssltstyle type34textcss34gt page bottomright content counterpage 34 of 34 counterpages ltstylegt at my bottom of the report i create a label to hold the number please looklttablegt lttrgt lttdgtltp class34padding1034gtltaspLabel ID34Label4134 runat34server34 Text34Update34

Hi phonghueNormally browsers print the page numbers by defaultThe 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 defaultIf you want to display page number in web page refer below codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltstyle type34textcss34gt body counterreset page pageFooter pagebreakbefore always counterincrement page pageFooterafter display block textalign right content 34Page 34 counterpage pageFooterfirstpage pagebreakbefore avoid ltstylegt ltscript type34textjavascript34gt function PrintPanel var panel documentgetElementById34con

Display page numbers on pages using CSS and print in JavaScript

phonghue

SOLVED CLOSED ACTIVE ANSWERED
User: phonghue
Posted: on Jun 23, 2019 11:50 PM
Forum: HTML and CSS
Answer: 1
Views: 97939

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.

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Jun 25, 2019 07:36 AM
Report

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

Display page numbers on pages using CSS and print in JavaScript

Company

Explore

Follow us

Contact Us