css：在 Chrome 中对打印的页面进行编号

Question

我必须支持的浏览器是 Chrome（在我的项目中使用电子），因此不能选择使用任何其他浏览器。

我已经寻找这个问题的解决方案有一段时间了，它似乎没有答案。我尝试过使用这种形式的方法（从@media print 的 CSS 页面 x of y复制）：

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>

上述方法适用于 FF，但不适用于 Chrome。似乎thead/tfootchrome 在打印预览的每个打印页面上重复，但它不会导致任何计数器增量。在每个打印页上打印相同的计数器值。

我也尝试过涉及 的方法@page，但这似乎在几年前就停止工作了。

示例（从浏览器支持 CSS 页码复制）：

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

有谁知道这个问题的解决方法？还是我死在水里了？欢迎任何 javasript/nodejs 解决方案。

Answer 1

如果您希望在 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>

CSS 使数字出现在 div 中：

.page-number{
  content: counter(page)
}

该库还允许轻松管理页边距、页脚、页眉等。

如果您只想在打印时显示数字（和分页符）的解决方案

在这种情况下，您只需在打印文档时应用Paged.js CDN。我能想到的一种方法是添加一个print me触发 Javascript 的按钮：

1. 将CDN添加到页面
2. 然后执行 window.print();启动导航器的打印提示