关于打印：浏览器对CSS页码的支持


Browser Support for CSS Page Numbers

因此我知道此选项：使用CSS / HTML的页码。

到目前为止，这似乎是将页码添加到页面的打印版本中的最佳方法，但是我无法对此进行任何修改以在任何地方使用。我已经在Chrome，Firefox和IE9的Windows 7计算机上尝试过。基于某些链接，Prince XML等更专有的软件可能会支持此功能。 Web浏览器是否支持打印版本？

我尝试制作一个空白的html文件，并在头部中的两个样式标签之间添加了该文件：

1
2
3
4
5
@page {
  @bottom-right {
    content: counter(page)" of" counter(pages);
  }
}

我也简化了它，甚至仅使用content:"TEXT";即可查看是否可以显示某些内容。在任何地方都支持吗？我使用\\'this \\'的具体含义是@page和@bottom-right标记，因为我已经获得了可以多次工作的内容。

相关讨论

我也一直在尝试实现分页媒体，并且根据此Wikipedia页面发现，目前还没有浏览器支持页边距框。难怪这行不通！

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(级联样式表)

请参阅表格，"语法和规则"的"边距框"部分。页边编号以及运行页眉和页脚都需要用边距框。实现此功能将节省我将打印的媒体转换为PDF的开销。

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

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

要打印，请右键单击结果框(右下)，然后选择

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

CSS是

1
2
3
4
5
6
7
8
9
10
11
12
#content {
    display: table;
}

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

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

，HTML是

1
2
  Page
  multi-page content here...

这似乎不再起作用。似乎只能使用很短时间，并且浏览器支持已删除！

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

您可以将起始号码设置为任何数字，默认值为0。

示例：

1
2
3
4
5
6
7
@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content:"Page" counter(page)" of" counter(pages);
    }
}

...理论上。在现实世界中，只有PrinceXML支持此功能。

相关讨论

通过Mozilla，(打印文档)

这将在每个打印页面上放置页眉和页脚。这在Mozilla中效果很好，但在IE和Chrome中效果不佳。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
Print sample
<link rel="stylesheet" href="style4.css">
</head>
<body>
Section A
<p><center>[wp_ad_camp_3]</center></p><p>This is the first section...</p>
Section B
<p>This is the second section...</p>

  Heading for paged media


  Page:

</body>
</html>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*** 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;
}

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

此JS库采用您的HTML / CSS并将其切成页面，准备以书本形式进行打印，您将在浏览器中对其进行预览。它使@page和大多数CSS3规范都适用于Chrome。

解决方案1(简单)，如果可以将视图切成页面，可以打印了

只需将其CDN添加到页面的head标记中：

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

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

将HTML放置在要显示当前页码的任何地方：

1
 

使数字显示在div中的CSS：

1
2
3
.page-number{
  content: counter(page)
}

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

解决方案2(trickier)如果只想在打印时显示数字(和分页符)

在这种情况下，仅在打印文档时才需要应用Paged.js CDN。
我能想到的一种方法是添加一个将Javascript触发到

的print me按钮

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