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。

解决方案，如果您可以将视图切成页面，准备打印

只需将他们的 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：

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

CSS：在Chrome中为打印的页面编号

1 个答案:

解决方案，如果您可以将视图切成页面，准备打印

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