在Chrome版本52.0.2743.116 m（64位）中打印html时需要打印页码。不过我还没有找到答案。
我已经尝试过这个：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
这根本不起作用。
然后我找到了这个Q&A：
对于这个答案，我们没有使用@page，这是一个纯CSS答案，但可以在FireFox 20+版本中使用。这是示例的链接。 CSS 是：
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
HTML代码是：
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
不幸的是，这仅适用于 FireFox 20+ 版本和 Chrome 版本 35.0.1916.153
降级不是答案。 你能帮我吗？
代码：
HTML：
body {
counter-reset: section;
}
@media print {
.page {
page-break-after: always;
}
.page .pageEnd::after {
counter-increment: section;
/* Increment the section counter*/
content: "Page " counter(section) " ";
/* Display the counter */
}
}<div class="page">
<h2>Here is page 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<div class="page">
<h2>Here is page 7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
<div class="pageEnd"></div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Numbers</title>
<style>
/* Define the header for printed pages */
@page {
size: A4;
margin: 1cm;
counter-increment: page;
@top-center {
content: "Page " counter(page);
}
}
/* Hide header on screen */
@media screen {
@page {
margin: 0;
}
}
/* Your other CSS styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
/* Add your other styles here */
}
</style>
</head>
<body>
<!-- Your HTML content goes here -->
<div>
<h1>Sample Content</h1>
<p>This is a sample paragraph.</p>
<!-- Add more content as needed -->
</div>
</body>
</html>
In this code:
Just ensure that you include this CSS within your HTML file or link it externally. When you print the HTML page from Chrome, the printed pages will display page numbers at the top center.. [enter link description here][1]