在可打印文档的 <thead> 上使用 CSS 添加总页数指示器？

Posted 2023-03-10

【中文标题】在可打印文档的 <thead> 上使用 CSS 添加总页数指示器？

【英文标题】：Add Total Pages indicator using CSS on <thead> of printable document?

【发布时间】：2013-12-13 09:33:49

【问题描述】：

我为我的网页修改了a CSS page-numbering solution。

它会自动显示“第 1 页”、“第 2 页”等。我希望它显示“第 1 页，共 5 页”、“第 2 页，共 5 页”等。

这里是my current example code: (Demo)

@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> 的解决方案要简单得多。

【问题讨论】：

你能为网站的每个页面创建一个元素吗？因此，一个有 3 个页面（主页、关于、联系人）的站点将在每个页面上创建一个无序列表，每个页面都有一个 li。然后，您可以对这些元素使用反增量。我能想到的最好的 :) 这个列表实际上也可以成为用户方便的站点地图 :)

实际上，我正在使用的网页是可打印的公司文档。您的评论似乎与这个问题无关。对不起。 :)

目前所见，只能给出之后所有元素的总数。

这很奇怪。它适用于第 1 页，但不适用于其余页面。 jsfiddle.net/KeuwU/8jsfiddle.net/KeuwU/8/show

理论上，应该可以使用 position:fixed 元素来计算总页数。由于对齐困难，它不会是最佳的，它的效用有限。我会发布一个示例，但I haven't got it to behave right yet.

【参考方案1】：

您可以使用计数器（页面）。这是一个例子

thead span.page-number:after 
    counter-increment: page;
    content: "Page " counter(page) " of " counter(pages);

【讨论】：

对我不起作用。请注意，这是我在发布的Demo 中尝试的。

【参考方案2】：

虽然不是纯粹的 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 作为类出现在文档上的任何元素中的次数。

【讨论】：

对不起，这是一个错误的答案，因为只涉及一个元素。该元素在每一页上重复，因为它位于<thead> 中，但仍然只有一个元素。 length 永远是 1。