Html 打印html时在页面上打印页码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20050939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print page numbers on pages when printing html
提问by Donvino
I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it.
So the CSS code is next:
我已经阅读了很多关于打印页码的网站，但是当我尝试打印它时，我的 html 页面仍然无法显示它。
所以接下来的 CSS 代码是：
@page {
margin: 10%;
@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
I've tried to put this page rule inside
我试过把这个页面规则放在里面
@media all {
*CSS code*
}
And outside of it, tried to put it in @media print, but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code.
Could somebody show me an example of implementing this @pagerule in the big html page with several pages? I just need the code of html page and the code of css file, that works.
P.S. I have the latest supported versions of browsers.
在它外面，试图把它放进去@media print，但没有任何帮助我在我的页面上显示页码。我尝试过使用 FireFox 和 Chrome（如您所知，基于 WebKit）。我认为问题出在我的 html 或 css 代码中。
有人可以向我展示@page在包含多个页面的大 html 页面中实现此规则的示例吗？我只需要html页面的代码和css文件的代码，就可以了。
PS 我有最新支持的浏览器版本。
采纳答案by Donvino
As @page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answerposted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the linkof an example.
The CSS is:
由于带有页码的@page 目前在浏览器中不起作用，因此我正在寻找替代方案。
我找到了Oliver Kohll发布的答案。
我将在此处重新发布，以便每个人都可以更轻松地找到它：
对于这个答案，我们没有使用 @page，这是一个纯 CSS 答案，但可以在 FireFox 20+ 版本中使用。这是一个例子的链接。
CSS是：
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
而 HTML 代码是：
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
This way you can customize your page number by editing parametrs to #pageFooter. My example:
通过这种方式，您可以通过将参数编辑为#pageFooter来自定义页码。我的例子：
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
This trick worked for me fine. Hope it will help you.
这个技巧对我很好。希望它会帮助你。
回答by Krish R
Can you try this, you can use content: counter(page);
你可以试试这个，你可以用 content: counter(page);
@page {
@bottom-left {
content: counter(page) "/" counter(pages);
}
}
Ref: http://www.w3.org/TR/CSS21/generate.html#counters
参考：http: //www.w3.org/TR/CSS21/generate.html#counters
回答by WoIIe
Try to use https://www.pagedjs.org/. It polyfills page counter, header-/footer-functionality for all major browsers.
尝试使用https://www.pagedjs.org/。它为所有主要浏览器填充了页面计数器、页眉/页脚功能。
@page {
@bottom-left {
content: counter(page) ' of ' counter(pages);
}
}
It's so much more comfortable compared to alternatives like PrinceXML, Antennahouse, WeasyPrince, PDFReactor, etc ...
与 PrinceXML、Antennahouse、WeasyPrince、PDFReactor 等替代品相比，它要舒服得多......
回答by SaturnsEye
This is what you want:
这就是你想要的：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
回答by user9663245
**@page {
margin-top:21% !important;
@top-left{
content: element(header);
}
@bottom-left {
content: element(footer
}
div.header {
position: running(header);
}
div.footer {
position: running(footer);
border-bottom: 2px solid black;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
<div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
<span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
</div >**
