css：在 HTML 页脚中为打印的 PDF 页面呈现页码（Chromium）

Question

我动态生成 PDF 的工作流程：

1. Handlebars 编译 HTML
2. 我使用带有 position: fixed 的 CSS 技巧在该 HTML 中添加了一个“假页脚”，该技巧实际上只出现在 HTML 中一次的普通 <div> 元素上
3. Puppeteer（因此，无头 Chromium 浏览器）用于从此 HTML 页面生成 PDF（我知道 Puppeteer 的 git 版本具有自动页脚插入功能；由于复杂的原因，我坚持使用不支持此功能的 npm 版本）。

我的问题是如何在此页脚中添加页码。我尝试了counter-reset + counter-increment 解决方案，但这不会增加页面计数器，因为从它的角度来看，只有一个 HTML 元素应用了它。

所以我在生成的 PDF 的每一页上都有一个页脚，上面写着“第 1 页”。

HTML 元素：

...
<div class="page-footer"></div>
...

CSS 样式：

.report {
  counter-reset: pageIndex 0;

  .page-footer:before {
    content: "Page: " counter(pageIndex);
    counter-increment: pageIndex +1;
  }

  .page-footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     border-bottom: solid 1px;
  }
  ...
}

这样的事情真的适用于 Chromium，还是我只是在浪费时间？

Answer 1

我不熟悉你的工具，但我自己做了一些 HTML 到 PDF 的东西。 听起来您的单个 HTML 正在使用页脚中的页码呈现（正确，因为此时只有一页），并且正在通过“打印到文档”类型转换创建单独的 PDF 页面。

然后我的建议是将您现有的 CSS 规则弹出到 @media print 查询中，这应该对 PDF 打印过程创建的页面进行编号。