javascript - css:在 Chrome 中为打印页面编号

Question

我必须支持的浏览器是 Chrome(在我的元素中使用电子)，因此不能选择使用任何其他浏览器。

我一直在寻找这个问题的解决方案，但似乎没有答案。我尝试过使用这种形式的方法(从 CSS page x of y for @media print 复制):

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/tfoot的 chrome 在打印预览的每个打印页面上重复，但它不会导致任何计数器增量。每个打印页上都打印相同的计数器值。

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

示例(从 Browser Support for CSS Page Numbers 复制):

@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。
解决方案，如果您可以将 View 切割成页面，准备打印
只需在 head 中添加他们的 CDN您页面的标签:

<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 的按钮:

将CDN添加到页面

然后 执行 window.print();启动导航器的打印提示