时间戳

首页 > 解决方案 > CSS 分页媒体总页数减去封面页数

javascript - CSS 分页媒体总页数减去封面页数

问题描述

使用分页媒体 CSS 将 HTML 转换为 PDF 时，我需要将不包括封面页（正面和背面）的页面总数放在页脚中。

下面的 CSS 适用于计算所有页面。

content: "Page " counter(page) " of " counter(pages);

但我需要的是类似的东西：

content: "Page " counter(page) " of " counter(pages) - 2;

根据 W3.org 的说法，“页面”计数器不能被操纵(1)并且 calc() 函数不支持使用计数器(2)。

使用自定义计数器将不起作用，因为它返回当前计数器值而不是最终计数器值。所以我会得到第 1 页（共 1 页）、第 2 页（共 2 页）、第 3 页（共 3 页）……

作为一种解决方法，我使用了带有以下 JavaScript 的表单字段：

var x = this.getField('pageTotal'); 
if (x.readonly == false){
    x.value = this.numPages - 2;
    x.readonly = true; 
}

有更好的选择吗？

编辑：可以在没有 CSS 并且不需要表单字段的情况下完成的一种替代方法是进行“双重发布”。IE

  1. 发布文档一次。
  2. 得到总页数并减去 2。
  3. 重新发布将页数作为参数传递。

标签： javascriptpdf-generationcss-paged-media

解决方案

https://www.princexml.com/forum/topic/504/reset-the-pages-plural-counter上的讨论采用了另一种方法，使用类似target-counter(url(#end), page)“pages”的方法来获取总页数。

在第一个真实页面上使用counter-reset: page 1;，然后<div id="end"> </div>在最后一个真实页面上添加一个。

content: "Page " counter(page) " of " target-counter(url(#end), page); 应该返回你想要的值，不包括封底。

推荐阅读