我已经阅读了很多关于打印页码的网站，但是当我尝试打印时，我仍然无法显示我的html页面。
所以CSS代码是下一个：
@page {
margin: 10%;
@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
我试图将此页面规则放在
中@media all {
*CSS code*
}
除此之外，尝试将其放入@media print，但没有任何帮助我在页面上显示页码。我尝试过使用FireFox和Chrome（如您所知，基于WebKit）。我认为问题出在我的html或css代码中。
有人能告诉我一个在几个页面的大html页面中实现这个@page规则的例子吗？我只需要html页面的代码和css文件的代码，这是有效的。
附：我有最新支持的浏览器版本。
答案 0 :(得分：47)
由于@page页面编号在浏览器中不起作用，我现在正在寻找替代方案
我发现 Oliver Kohll 发布了answer。
我会在这里重新发布，这样每个人都可以更轻松地找到它：
对于这个答案，我们不使用@page ，这是一个纯CSS答案，但适用于FireFox 20+版本。这是一个例子的link
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>
这样，您可以通过将参数编辑为 #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);
}
这个技巧对我很有用。希望它会对你有所帮助。
答案 1 :(得分：12)
尝试使用 https://www.pagedjs.org/ 。它为所有主要浏览器填充页计数器，页眉/页脚功能。
。@page {
@bottom-left {
content: counter(page) ' of ' counter(pages);
}
}
与PrinceXML，Antennahouse，WeasyPrince，PDFReactor等替代方案相比，它要舒适得多。
它是完全免费的！没有定价或其他。真的救了我一命！
答案 2 :(得分：10)
你可以尝试这个吗，你可以使用content: counter(page);
@page {
@bottom-left {
content: counter(page) "/" counter(pages);
}
}
答案 3 :(得分：2)
这就是你想要的：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
答案 4 :(得分：0)
tinymce.activeEditor.getContent({format: 'raw'}
答案 5 :(得分：0)
此javascript将在页面的右下角添加绝对定位的div，其页码在所有浏览器中均可使用。
A4高度= 297mm = 1123px（96dpi）
<html>
<head>
<style type="text/css">
@page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = addPageNumbers;
function addPageNumbers() {
var totalPages = Math.ceil(document.body.scrollHeight / 1123); //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi,
for (var i = 1; i <= totalPages; i++) {
var pageNumberDiv = document.createElement("div");
var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
pageNumberDiv.style.position = "absolute";
pageNumberDiv.style.marginTop = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
pageNumberDiv.style.height = "16px";
pageNumberDiv.appendChild(pageNumber);
document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
}
}
</script>
<div id="content">
Lorem ipsum....
</div>
</body>
</html>
答案 6 :(得分：0)
我知道这不是编码答案，但这是 OP 想要的，也是我花了半天时间试图实现的目标 - 从带有页码的网页打印。
是的，它是两步而不是一步，但尽管搜索了几个小时，我还是找不到任何 CSS 选项。真遗憾所有浏览器都删除了过去允许它的功能。
答案 7 :(得分：0)
如果您想在 Chrome/Chromium 下打印时添加页码，一种简单的解决方案是使用 Paged.js。
这个 JS 库接受您的 HTML/CSS 并将其切割成页面，准备打印成书，您将在浏览器中预览。它使 @page 和大多数 CSS3 规范适用于 Chrome。
只需将他们的 CDN 添加到您页面的 head 标记中即可：
<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
然后您可以使用自动计数器 page 添加页码。示例：
HTML 放在任何你想显示当前页码的地方：
<div class="page-number"></div>
使数字出现在 div 中的 CSS :
.page-number{
content: counter(page)
}
该库还允许轻松管理页边距、页脚、页眉等。
在这种情况下，您只需要在打印文档时应用 Paged.js CDN。
我能想到的一种方法是添加一个 print me 按钮来触发 Javascript：
window.print();启动导航器的打印提示答案 8 :(得分：0)
我不知道是否还有人需要答案，试试这个，它可能对你有用 在你的 html 文件中放置一个 div 元素，你的 html 就像这样
<div class="page-number"></div>
像这样做你的css
.page-number:before {
content: "Page: " counter(page);}
希望对你有用