打印(或PDF)输出中的CSS页计数器

Question

@page { @top-right { content: "Page " counter(page) " of " counter(pages); } }

这是我发现将页码显示为"第5页,共10页"的唯一方法.但它似乎没有起作用.我在一个简单的HTML页面中尝试过,但它没有用.

我想使用普通的html/css在页面的任何位置显示页码.

有没有人成功让它发挥作用？如果是这样,我感谢您的支持.

Answer 1

1. 你引用一个(大体上正确的)CSS片段来从HTML输入创建PDF和打印输出("分页媒体"),但你说:"它似乎没有工作".

2. 然后,两句话进一步向下,你说:"我想在页面的任何位置显示页码".

首先,指出第二点.

无法将页码放入HTML网站本身.此功能仅适用于分页媒体,例如PDF或从HTML创建的打印输出.

因此,它仅适用于PDF或打印输出.但即便如此:也无法将页码放在PDF或打印页面的任意位置.您唯一的选择是顶部和底部左/右/中心边距框,主页上没有任何地方.

第二,第一点.

现在将页码信息放入这些可能的位置......

既然你没有详细说明你的设置究竟不起作用,那么让我给你一个简介:

创建一个文件my.css并将以下内容放入其中(这不是您的问题所需的最低要求,但还为您提供了一些实验性的好处).

另外,首先我将解释如何将它与PrinceXML一起使用.

@page { size: A4 landscape;
    background: gray;
    border: solid 1pt blue;
    padding: 9pt;
    margin: 18pt 18pt 18pt 18pt;
    font-family: "Helvetica Narrow";
    @top-left {
       content: 'PrivateCopy';
       color: red;
       font-style: bolditalic;
              }
    @top {
       content: string(doctitle);
         }
    @bottom-left {
       content: 'My Super-Duper Manual';
       font-style: bold;
                  }
    @top-right {
       content: "Page " counter(page) " of " counter(pages);
       font-style: bold;
                  }
    @bottom {
       content: string(paratitle);
            }
  }

将文件保存在磁盘上的某个位置.

现在调用PrinceXML命令行并使用它-s my.css来应用样式表:

prince                                                           \
  --verbose                                                      \
  --javascript                                                   \
  --style=/path/to/my.css                                        \
    http://stackoverflow.com/questions/12061835/css-page-counter \
  --output=my-css-page-counter-question.pdf

(显然,你需要调整my.css样式表文件的路径.但是......)Voila !,你的Stackoverflow问题在PDF中......

当然,您可以使用更多功能扩展my.css.当然,您可以将它用于HTML文件的任何转换,甚至是与远程文件混合的本地文件:

prince                                                 \
  --verbose                                            \
  --javascript                                         \
  -s /path/to/my.css                                   \
   /home/nada.adly/Documents/title.html                \
   /home/nada.adly/Documents/chapter_1.html            \
   /home/nada.adly/Documents/chapter_2.html            \
   http://en.wikipedia.org/wiki/Cascading_Style_Sheets \
   http://stackoverflow.com/questions/tagged/css       \
  -o random.pdf

现在除了使用PrinceXML之外还使用CSS,并用于直接打印输出.(当然你可以随时打印PrinceXML生成的PDF - 但也许你根本不想使用Prince？)

同样,您不清楚问题的范围:

1. 难道你作为一个浏览器用户想获得这些页码到任何网站打印你可以做什么？

2. 或者,作为负责网站的网站管理员,您是否希望确保这些网页编号进入您网站访问者的内容打印输出？

我不会在这里阐述这两点中的任何一点(因为我可能完全忽略了你的观点),但......

• ...你应该谷歌搜索'用户样式表'和'print.css'来找出存储这个CSS代码的确切位置(因为用户样式表位置因浏览器而异);

• ... CSS代码对于两个目的中的任何一个都是相同的(网站管理员的样式表或用户样式表).

Answer 2

仅当打印 HTML 页面时才有效。尝试打印 HTML 页面或将其另存为 .xps 。您将看到页码。