Question

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

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

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

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

Answer 1

您引用一个（基本上正确的）CSS片段来从HTML输入创建PDF和打印输出（＆＃34;分页媒体＆＃34;），但您说：＆＃34;它似乎没有工作＆＃34; 。
然后，再说两句话，你说：＆＃34;我想在页面的任何位置显示页码＆＃34; 。

首先，指出第二点。

无法将页码放入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！，PDF格式的Stackoverflow问题......

当然，您可以使用更多功能扩展 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？）

同样，您不清楚问题的范围：

您作为浏览器用户想要将这些页码编入任何网站打印输出中吗？
或者您作为负责网站的网站管理员希望确保这些网页编号进入您的网站访问者从您的内容打印输出的内容？

我在这里没有详细说明这两点（因为我可能完全忽略了你的观点），但......

...您应该谷歌＆＃39;用户样式表＆＃39; 和＆＃39; print.css＆＃39; 找出存储此CSS代码的确切位置（因为用户样式表位置因浏览器而异）;
... CSS代码对于两个目的中的任何一个都是相同的（网站管理员的样式表或用户样式表）。

Answer 2

仅在打印HTML页面时有效。尝试将HTML页面打印或保存为.xps。您将看到页码。

Answer 3

如果您使用 Prince ，一切都会正常工作，您可以放心地使用最新的CSS3标准，这样您就可以制作打印质量的PDF。

如果你不使用王子，那你就不走运了。有多种选择可以解决，但没有一个真正能够胜任。

 @page { anything }

在分页时，

在浏览器世界中几乎无用。在某些浏览器中，某些边距似乎很好。另一个问题是缺少像＆＃34; @ top-right＆＃34;等边缘框的实现。我测试过的浏览器都没有听说过它们:-)同样，Prince知道所有这些。

Chrome 并没有使用整个@page方法，并且在chrome-print对话框中有一个复选框，允许您嵌入非常粗糙的分页（＆＃34; 1/2＆＃ 34）。它无法以任何方式配置，完全忽略任何与页码相关的css。

Firefox 是一个更好的候选者，至少有一个虚拟解决方法，但问题是，计数器（页面）始终为零。因此，如果您想显示总页数，这种方法无处可去。

对于浏览器，它将完全归结为使用过的HTML / CSS渲染引擎。所有库，独立解决方案和嵌入式浏览器都依赖于底层渲染器，如果该功能没有或者不支持，框架可以对它做任何事情（如awesomoium，cefsharp等）。

Answer 4

如果使用浏览器进行打印，则很少有浏览器（截至2013年12月）支持所有CSS Paged Media规范。总的来说，您通常非常确定支持分页符，但页眉和页脚在我测试的任何浏览器中都不起作用。

但是，如果我使用PrinceXML打印，它可以正常工作：

"C:\...\prince.exe" http://localhost/Test/ -o C:\Pdf\prince.pdf

我获取所有页眉和页脚，页码，动态内容。

随着规范的成熟，你会发现越来越多的浏览器/渲染引擎会增加全面的支持。

打印（或PDF）输出中的CSS页计数器

4 个答案: