页码

显示页码可以通过 @page 的 counter 实现。显示的位置可以是：

@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

具体内容你可以从 Margin at-rules 获取。

提示

值得注意的是，counter(page) 和 counter(pages) 仅在 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