在可打印文档的<thead>上使用CSS添加Total Pages指标？

Question

我为我的网页修改了一个CSS页面编号解决方案.

它会自动显示"Page 1","Page 2"等.我希望它显示"第1页,共5页","第2页,共5页"等.

这是我当前的示例代码 :( 演示)

@media print {
  thead span.page-number:after {
    counter-increment: page;
    content: "Page " counter(page) " of ?";
  }
}

HTML :(原谅我使用表而不是CSS display: table-header-group)

<table>
  <thead>
    <tr>
      <td>
        <span class="page-number"></span>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        ..............................................................
      </td>
    </tr>
  </tbody>
</table>

有没有办法添加总页数来代替我的?？

我只对Firefox或Chrome的最新版本感兴趣.

到目前为止,我目前的解决方案是使用服务器为每页创建一个元素,但要以这种方式获得最佳页面分解要困难得多.该<thead>解决方案是简单得多.

Answer 1

虽然不是纯粹的 CSS 答案，但使用一点 JavaScript 并假设每个新页面/断点将由 div/span/td 或其他 HTML 实体表示，每个实体中都包含一个“公共类名”。您可以像这样获得总页数。

<div class="xxx"></div>
<div class="xxx"></div>
<div class="fff"></div>
<div id="footer">
<script type="application/javascript">
aaa = document.getElementsByClassName("xxx").length;
document.write(aaa);
</script>
</div>

在上面的示例中，这将在插入脚本时输出到浏览器的数字 2，因为脚本会计算 xxx 作为类在文档上的任何元素中出现的次数。