浏览器支持CSS页码

js4nwp54 于 11个月前发布在其他

关注(0)|答案(5)|浏览(98)

所以我知道这个选项：Page numbers with CSS/HTML。
到目前为止，这似乎是最好的方法来添加页码到一个页面的打印版本，但我不能得到任何变化，这在任何地方工作。我已经尝试了我的Windows 7机器在Chrome，Firefox和IE 9。根据一些链接，它看起来像这可能是在更多的专有软件，如王子XML支持。这是由Web浏览器支持打印版本吗？
我试过只创建一个空白的html文件，并在头部的两个样式标签之间添加这个：

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

字符串
我还简化了它，甚至只使用content: "TEXT";来看看我是否可以得到一些东西来显示。这在任何地方都支持吗？通过'this'，我特别指的是@page和@bottom-right标记，因为我已经让内容工作了很多次。

css

来源：https://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers

5条答案

按热度按时间

oug3syen1#

我也一直在尝试实现页面媒体，根据这个Wikipedia页面，我发现目前还没有浏览器支持边距框。难怪它不起作用！
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
请参阅表格，语法和规则，边距框部分。边距框是页码以及运行页眉和页脚所需的。实现这一点将保存我必须将打印媒体转换为PDF的开销。

赞(0）回复(0）举报 11个月前

x4shl7ld2#

不使用@page，但我已经得到了纯CSS页码在Firefox 20中工作：
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>

型

赞(0）回复(0）举报 11个月前

vbkedwbf3#

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

根据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);
    }
}

字符串
页面媒体不被任何主流的Web浏览器很好地支持，但被专门的HTML到PDF生成器支持，如Prince XML和WeasyPrint。

赞(0）回复(0）举报 11个月前

dgjrabp24#

通过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;
}

型

赞(0）回复(0）举报 11个月前

yb3bgrhw5#

如果您希望在Chrome/Chromium下打印时添加页码，一个简单的解决方案是使用Paged.js。
这个JS库将你的HTML/CSS剪切成页面，准备打印成一本书，你可以在浏览器中预览。它使@page和大多数CSS3规范适用于Chrome。

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

只需在页面的head标签中添加他们的CDN：

<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。我能想到的一种方法是添加一个print me按钮，它会触发JavaScript：
1.将CDN添加到页面
1.然后执行window.print();启动导航器的打印提示

赞(0）回复(0）举报 11个月前

我来回答

浏览器支持CSS页码

5条答案

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

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

相关问题

热门标签

最新问答