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

Question

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

1. Handlebars编译HTML
2. 我添加了一个假的页脚＆＃34;使用position: fixed上的CSS技巧对普通<div>元素实际显示在HTML中一次
的HTML
3. Puppeteer（所以，无头Chromium浏览器）用于从这个HTML页面生成PDF（我知道Puppeteer的git版本有自动页脚插入;由于复杂的原因，我坚持使用不支持这个的npm版本尚未）。

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

所以我得到一个页脚说＆＃34; Page 1＆＃34;在生成的PDF的每个页面上。

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页面＆＃ 39;类型转换。

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