浏览器对 CSS 页码的支持答案

【问题标题】：Browser Support for CSS Page Numbers浏览器对 CSS 页码的支持
【发布时间】：2013-03-25 16:45:29
【问题描述】：

到目前为止，这似乎是将页码添加到页面的打印版本的最佳方法，但我无法在任何地方使用此方法的任何变体。我已经在 Chrome、Firefox 和 IE9 中尝试了我的 Windows 7 机器。根据一些链接，Prince XML 等更多专有软件可能支持此功能。打印版本的网络浏览器是否支持此功能？

我尝试只制作一个空白的 html 文件并在头部添加两个样式标签：

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

我还简化了它，甚至只使用content: "TEXT"; 来查看是否可以显示一些内容。这在任何地方都支持吗？我所说的“this”是指@page 和@bottom-right 标签，因为我已经多次获得内容。

【问题讨论】：

Chrome 或 firefox 不支持分页媒体（也可能不支持 IE9）。 CSS3 应该对分页媒体有一些支持，但我也无法让它工作。
那很可能就是答案。我一直在答案和教程中找到这个，但找不到任何有效的实现。猜猜这是将来要记住的另一件事。
显示分页媒体样式表可能还需要其他参数。如果一个网页上有多个“页面”，你如何声明一个页面？
媒体查询有用吗？然后，您可以在捕捉到页面右下角的元素上使用 @media print 作为解决方法。
回答最后一个问题：没有。任何主流浏览器尚不支持分页媒体边距框：en.wikipedia.org/wiki/…

标签： css printing cross-browser css-paged-media

【解决方案1】：

我也一直在尝试实现分页媒体，并且根据此 Wikipedia 页面发现，浏览器尚不支持边距框。难怪它不起作用！

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

请参阅表格、语法和规则、边距框部分。页边距框是页码以及运行页眉和页脚所需要的。实现这一点将节省我将印刷媒体转换为 PDF 的开销。

【讨论】：

【解决方案2】：

不使用@page，但我已经获得了在 Firefox 20 中工作的纯 CSS 页码：

http://jsfiddle.net/okohll/QnFKZ/

要打印，请右键单击结果框（右下角）并选择

此框架 -> 打印框架...

CSS 是

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

HTML 是

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

【讨论】：

但这并不是真正的页脚。如果文本最终跨越一页以上，#pageFooter 将在文本在最后一页结束的位置下方结束。
确实如此。不如@page 完全正常工作那么好。我想一个技巧可能是在最后一个内容元素的末尾添加间距以将页脚向下推到最后一页
这个解决方案的浏览器支持是什么？在我的带有 Chrome、Opera 和 Safari 的 Mac 上，表格页眉和页脚仅打印在表格的开头和结尾。 Firefox 会在每一页上打印它们，但 counter(page) 仅在第一次显示时才起作用。这对你有用吗，而我只是做错了什么？
我的直觉说这个counter的实现跟OL的内部行为有关，和print/pages无关。
这似乎是迄今为止最好的解决方法，如果你不想买王子 :-) 你有没有得到“counter(pages)”的非零值（即：总页数）？

【解决方案3】：

这似乎不再起作用了。似乎它只工作了很短的时间，浏览器支持被删除了！

根据https://developer.mozilla.org/en-US/docs/CSS/Counters，计数器必须先重置才能使用。

您可以将起始编号设置为任意值，默认为 0。

例子：

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

...理论上。在现实世界中，只有 PrinceXML 支持这一点。

【讨论】：

很高兴知道，但我仍然没有真正让它输出任何东西。您能否提供对@page 标签的任何见解？这真的会为您显示吗？
不幸的是，@page 在 Firefox 中不受支持，但在 Chrome 2.0+、IE 8.0+、Opera 6.0+ 和 Safari 5.0+ 中受支持。 @page :first 仅在 IE8+ 和 Opera 9.2+ 中受支持。这是每个 link 我确实得到了 @page 保证金在 FF 中工作，但没有别的。
这对我不起作用...它与任何浏览器兼容？
目前任何主流浏览器都不支持分页媒体边距框。停止根据未实施的工作草案提供答案。请。我也很好奇这是如何被接受的，因为截至今天这段代码完全没有效果。
请删除此答案，因为这是不工作的情况。我浪费了很多时间，因为它没有在实时浏览器中进行测试。

【解决方案4】：

通过 Mozilla，(Printing a document)

这会在每个打印页面上放置页眉和页脚。这在 Mozilla 中运行良好，但在 IE 和 Chrome 中不太好。

<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
  Heading for paged media
</div>
<div id="print-foot">
  Page: 
</div>
</body>
</html>

CSS：

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
    display: none;
}

/* print only */
@media print {

h1 {
   page-break-before: always;
   padding-top: 2em;
}

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
}

#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;

    font-size: 200%;
    text-align: center;
}

#print-foot {
   display: block;
   position: fixed;
   bottom: 0pt;
   right: 0pt;

  font-size: 200%;
}

#print-foot:after {
    content: counter(page);
    counter-increment: page;
}

【讨论】：

这适用于 Firefox，这很好。但我还没有找到如何让它在 Chrome (53) 或 IE (11) 中工作的方法
页眉和页脚打印在页面文本上 :( 无法找到如何在每页上创建空白边距以在那里打印页眉/页脚。如果我指定 top: -0.5cm，页眉向上移动，但会被页面的边距剪切，并且仅部分可见。overflow: visible 没有帮助。

【解决方案5】：

如果您希望在 Chrome/Chromium 下打印时添加页码，一个简单的解决方案是使用 Paged.js。

这个 JS 库获取您的 HTML/CSS 并将其切割成页面，准备好作为一本书打印，您将在浏览器中进行预览。它使 @page 和大多数 CSS3 规范适用于 Chrome。

解决方案 1（简单）如果您可以将视图切割成页面，准备打印

只需将他们的 CDN 添加到您页面的 head 标记中即可：

<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">

然后您可以使用自动计数器page 添加页码。示例：

HTML 放在任何你想显示当前页码的地方：

<div class="page-number"></div>

CSS 让数字出现在 div 中：

.page-number{
  content: counter(page)
}

该库还允许轻松管理页边距、页脚、页眉等。

如果您只想在打印时显示数字（和分页符），则解决方案 2（更复杂）

在这种情况下，您只需要在打印文档时应用 Paged.js CDN。我能想到的一种方法是添加一个触发 Javascript 的print me 按钮：

将 CDN 添加到页面
然后执行 window.print();启动导航器的打印提示

【讨论】：