提问人：Natalia 提问时间：8/24/2016 最后编辑：CommunityNatalia 更新时间：2/6/2018 访问量：5137
如何在新 Chrome 中打印 html 时打印页码？
How to print page number while printing html in new Chrome?
问：
在 Chrome 版本 52.0.2743.116 m（64 位）中打印 html 时需要打印页码。但是，我还没有找到答案。
我已经试过了：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
这根本不起作用。
然后我找到了这个问答：
对于这个答案，我们没有使用 @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
降级不是答案。 你能帮帮我吗？
答：
0赞
Mark Wilkins
12/30/2016
#1
这种设置对我有用，您只需要在每个页面末尾添加一个元素即可将页面计数器附加到其中。
法典：
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>评论
1赞
Natalia
1/9/2017
谢谢你的回答！不幸的是，它对我没有用。我有多页内容，不是静态的。所以，我需要没有 <div> 的自动打印数字。
1赞
carkod
2/8/2018
欢迎使用 Stack Overflow
评论