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

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

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

有没有人成功使它工作？如果是这样，我感谢您的支持。

4

4 回答 4

5

  1. 您引用了一个（基本上是正确的）CSS 片段来从 HTML 输入创建 PDF 和打印输出（“分页媒体”），但您说：“它似乎不起作用”。

  2. 然后，再往下两句，你说：“我想在页面的任何位置显示页码”。

首先，第二点。

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

因此，它仅适用于 PDF 或打印输出。但即使在那里：也无法将页码放在 PDF 上或在任意位置打印页面。您唯一的选择是顶部和底部-left/-right/-center 边距框，在主页上没有。

第二点，第一点。

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

由于您没有详细说明哪些设置不适用于您的设置，所以让我给您一个概要：

创建一个文件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样式表文件。但是...）瞧！，您在 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？）

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

  1. 作为浏览器用户，您是否希望将这些页码打印到您可能会做的任何网站打印输出中？

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

我不会在这里详细说明这两点（因为我可能完全错过了你的观点），但是......

  • ...您应该搜索“用户样式表”和“print.css”以找出存储此 CSS 代码的确切位置（因为用户样式表的位置因浏览器而异）；

  • ...对于两种用途中的任何一种（网站管理员的样式表或用户样式表），CSS 代码都是相同的。

于 2012-08-22T21:19:15.137 回答
2

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

于 2012-08-21T19:43:02.397 回答
1

如果您使用Prince，一切都会正常工作，您可以放心地依赖最新的 CSS3 标准，这将允许您生成打印质量的 PDF。

如果你不使用prince，那你就不走运了。有多种解决方法，但没有一个能真正发挥作用。

 @page { anything }

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

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

Firefox是一个更好的候选者，至少有一个有效的解决方法，但这里的问题是，计数器（页面）总是为零。因此，如果您想显示总页数，这种方法无济于事。

对于浏览器，最终归结为使用的 HTML/CSS 渲染引擎。所有库、独立解决方案和嵌入式浏览器都依赖于底层渲染器，如果该功能不支持或支持不充分，框架将无能为力（如 awesomoium、cefsharp 等）。

于 2016-04-19T22:30:10.787 回答
0

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

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

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

我得到了所有的页眉和页脚、页码、动态内容。

您会发现随着规范的成熟，越来越多的浏览器/渲染引擎将添加完全支持。

于 2013-12-06T14:44:54.850 回答