javascript - css:在打印的 PDF 页面的 HTML 页脚中呈现页码(Chromium)

Question

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

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

我的问题是如何在此页脚中添加页码。我试过 counter-reset + counter-increment解决方案，但这不会增加页面计数器，因为从它的 Angular 来看，只有一个 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 打印过程创建的。