所以我从来没有能够得到这个工作为我的情况下。我知道其他情况下可能工作与上述答案，但我不能让前端单独生成动态页码。
我使用了后端的帮助，在我的例子中是PHP，并使用了一个名为wkhtmltopdf的插件。
这解决了我的问题，https://stackoverflow.com/a/13496899/6000966。
我能够从前端删除逻辑，并将其放在后端，让它处理动态页码。
我建议如果HTML页面使用来自后端的动态数据，应该这样做。

另一方面，静态页面应使用上述答案。

我在一篇俄语文章中找到了这段代码，它在每一页上添加了页码：

@page:right{
  @bottom-right {
    content: counter(page);
  }
}

@page:left{
  @bottom-left {
    content: counter(page);
  }
}

下面代码可以显示总页数，如“第3页，共120页”。

@page:left{
  @bottom-left {
    content: "Page " counter(page) " of " counter(pages);
  }
}

将counter-reset: page;应用于包含所有页码元素的父元素。另请注意，根据您的代码片段，您似乎需要.page-number（class），而不是#page-number（id）。id属性在整个文档中是唯一的，而class属性可以在同一标识符下重复。
第一个

不确定您的预期输出，但如果您尝试使用此代码片段，我认为它确实满足了您的要求[即增加页码]。代码是从[此原始示例] 1重新改编的
第一个

首先，回答这个问题是一个很大的挑战。其次，为什么其他的例子不起作用呢？这是因为计数器只在每个元素上触发。当你打印时，浏览器不会创建<thead>的新示例，至少不会创建到你网站的源代码。它只是简单地显示它。然而，在打印之前，可以绕过这个行为（'beforeprint'），更改DOM并使用Javascript重新创建打印页面。现在，在每个页面上都有一个新的<table>，其中包含<thead>的新示例。现在，计数器开始工作。在打印此代码后，会自动将DOM重置为打印前的状态。用户体验保持不变。
使用const pixelHeightA4 = 1000;，你可以指定多少像素适合一个a4。当我测试的时候，1000非常接近。
使用const heightOfTHead = 160;可以指定a4尺寸的表格标题的高度。
我希望代码中的注解可以解释这个过程。
第一个
希望这有帮助，如果没有，请评论！

编辑1：

它根据每个<tr>的行高自动计算一个a4可以容纳的行数。
您可以在here上进行测试（在chrome上进行测试）

[更新的答案]
试试这个。它工作正常，就像你希望的那样
第一个