【问题标题】:CSS page counter in printed (or PDF) output打印(或 PDF)输出中的 CSS 页面计数器
【发布时间】:2012-08-17 05:02:46
【问题描述】:
@page { @top-right { content: "Page " counter(page) " of " counter(pages); } }

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

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

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

【问题讨论】:

  • 什么是@page 和@top-right?你的意思是#page#top-right 吗?
  • @JonathanSampson, @page 是合法的 CSS:w3.org/TR/CSS21/page.html#page-box
  • 不,其实我指的是princexml.com/doc/8.1/page-numbers
  • @bfrohs 我对@media@page 很熟悉,但造成混乱的是@top-right
  • @user1615143,您可能需要在问题中注明这一点,因为它会极大地改变答案。

标签: css pdf printing counter princexml


【解决方案1】:

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

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

 @page { anything }

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

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

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

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

【讨论】:

  • 就我自己而言,我继续通过 cefsharp 使用带有硬编码 chrome 分页的 webkit。如果这对客户来说还不够,我会和 Prince 一起支付 pri(n)ce :-)
【解决方案2】:

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

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

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

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

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

【讨论】:

    【解决方案3】:
    1. 您引用了一个(基本上正确的)CSS sn-p 来从 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. 或者您作为负责网站的网站管理员是否希望确保这些页码进入您的网站访问者从您的内容中所做的打印输出中?

      李>

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

    • ...您应该在 Google 上搜索 'User Style Sheets''print.css' 以找出存储此 CSS 代码的确切位置(因为用户样式表的位置因浏览器而异);

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

    【讨论】:

    【解决方案4】:

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

    【讨论】:

    • 实际上我尝试打印它.. 它在右下角显示 1/1,这是默认情况下使用浏览器自己完成的.. 即使没有 css。你试过了吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-13
    • 2019-11-29
    • 2013-02-08
    • 2021-10-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多