CSS：在HTML頁腳中為打印的PDF頁面（鉻）呈現頁面編號

Question

我用於動態生成PDF的工作流程：

1. 車把編譯HTML
2. 我使用帶有position: fixed的CSS技巧在此HTML中添加了“假頁腳” position: fixed在通常僅在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打印過程創建的頁面進行編號。