Question

它自动显示“第1页”，“第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

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

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

Answer 2

虽然不是纯粹的CSS答案，只需要一点点javascript，并假设每个新的页面/断点都由div / span / td或其他具有＆＃34;公共类名称的#14;包含在每一个。你可以得到这样的总页数。

<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在文档的任何元素中作为类出现的次数。

在可打印文档上使用CSS添加总页数指示符？

2 个答案: