Page number

Page numbers can be displayed using the counter feature of @page. The display position can be:

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

For specific details, you can refer to Margin at-rules.

tip

It is worth noting that counter(page) and counter(pages) only take effect under Margin at-rules.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>Blink HTML to PDF Example</title>
    <style>
        @media print {
            @page {
                size: A4;
                margin: 3rem;
                background: darkgreen;
                @top-center {
                    content: 'Page ' counter(page) ' of ' counter(pages);
                    font-size: 2rem;
                    color: white;
                }
            }

            body {
                background: darkgray;
            }
        }
    </style>
</head>

<body>
<div style=""></div>
<div></div>
</body>

</html>

Page Number