所以我知道这个选项：使用 CSS/HTML 的页码。
到目前为止，这似乎是向页面的打印版本添加页码的最佳方法，但我无法在任何地方使用此方法的任何变体。我在我的 Windows 7 机器上尝试过 Chrome、Firefox 和 IE9。根据一些链接，Prince XML 等更多专有软件可能支持此功能。打印版的网络浏览器是否支持此功能？
我尝试制作一个空白的 html 文件，并在头部将其添加到两个样式标签之间：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
我还简化了它，甚至只使用
content: "TEXT";@page@bottom-right我也一直在尝试实现分页媒体，并且根据此维基百科页面发现，浏览器尚不支持边距框。难怪行不通！
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
请参阅表格、语法和规则、边距框部分。页边距框是页码以及运行页眉和页脚所需要的。实现此功能可以节省我将印刷媒体转换为 PDF 的开销。
不使用@page，但我已经获得了可以在 Firefox 20 中使用的纯 CSS 页码：
http://jsfiddle.net/okohll/QnFKZ/
要打印，请右键单击结果框架（右下角）并选择
此框架 -> 打印框架...
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>
这似乎不再起作用了。看起来它只工作了很短的时间，浏览器支持已被删除！
根据 https://developer.mozilla.org/en-US/docs/CSS/Counters，计数器必须在使用前重置。
您可以将起始数字设置为任意值，默认为 0。
示例：
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
任何主流 Web 浏览器都不能很好地支持页面媒体，但受专门的 HTML 到 PDF 生成器（例如 Prince XML 和 WeasyPrint）的支持。
通过 Mozilla，（打印文档）
这会在每个打印页面上放置页眉和页脚。这在 Mozilla 中运行良好，但在 IE 和 Chrome 中不太好。
<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
Heading for paged media
</div>
<div id="print-foot">
Page:
</div>
</body>
</html>
CSS：
/*** Print sample ***/
/* defaults for screen */
#print-head,
#print-foot {
display: none;
}
/* print only */
@media print {
h1 {
page-break-before: always;
padding-top: 2em;
}
h1:first-child {
page-break-before: avoid;
counter-reset: page;
}
#print-head {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
font-size: 200%;
text-align: center;
}
#print-foot {
display: block;
position: fixed;
bottom: 0pt;
right: 0pt;
font-size: 200%;
}
#print-foot:after {
content: counter(page);
counter-increment: page;
}
如果您希望在 Chrome/Chromium 下打印时添加页码，一种简单的解决方案是使用 Paged.js。
这个 JS 库获取您的 HTML/CSS 并将其切成页面，准备打印成书，您将在浏览器中预览。它使
@page只需将他们的 CDN 添加到您页面的
head<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
然后您可以使用自动计数器
page将 HTML 放置在要显示当前页码的任何位置：
<div class="page-number"></div>
CSS 让数字出现在 div 中：
.page-number{
content: counter(page)
}
该库还允许轻松管理页边距、页脚、页眉等。
这种情况下，您只需在打印文档时应用Paged.js CDN。 我能想到的一种方法是添加一个
print me window.print();现在到了 2024 年，它可以与 pagedjs 作为 polyfill 一起使用。请参阅此处的回复https://stackoverflow.com/a/78721972/99248