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

前端之家收集整理的这篇文章主要介绍了打印(或PDF)输出中的CSS页计数器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@page { @top-right { content: "Page " counter(page) " of " counter(pages); } }

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

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

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

解决方法

>您引用(基本上正确的)CSS片段来从HTML输入创建PDF和打印输出(“分页媒体”),但您说:“它似乎不起作用”.
>然后,再说两句话,你说:“我想在页面的任何位置显示页码”.

首先,指出第二点.@H_502_5@

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

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

第二,第一点.@H_502_5@

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

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

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

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

@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);
            }
  }

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

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

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

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

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

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 \
   https://stackoverflow.com/questions/tagged/css       \
  -o random.pdf

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

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

>作为浏览器用户,您是否希望将这些页码放入您可能执行的任何网站打印输出中?
>或者,作为负责网站的网站管理员,您是否希望确保这些网页编号进入您网站访问者的内容打印输出?@H_502_5@

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

> …您应该谷歌搜索用户样式表’和’print.css’以找出存储此CSS代码的确切位置(因为用户样式表位置因浏览器而异);> … CSS代码对于两个目的中的任何一个(网站管理员的样式表或用户样式表)都是相同的.@H_502_5@

猜你在找的CSS相关文章