所以我知道这个选项: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
标记,因为我已经让内容工作了很多次。
5条答案
按热度按时间oug3syen1#
我也一直在尝试实现页面媒体,根据这个Wikipedia页面,我发现目前还没有浏览器支持边距框。难怪它不起作用!
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
请参阅表格,语法和规则,边距框部分。边距框是页码以及运行页眉和页脚所需的。实现这一点将保存我必须将打印媒体转换为PDF的开销。
x4shl7ld2#
不使用@page,但我已经得到了纯CSS页码在Firefox 20中工作:
http://jsfiddle.net/okohll/QnFKZ/
要打印,请在结果框(右下角)中单击鼠标右键,然后选择
此帧->打印帧...
述CSS
字符串
HTML是
型
vbkedwbf3#
这似乎不再工作。似乎它只工作了很短的时间,浏览器支持被删除!
根据https://developer.mozilla.org/en-US/docs/CSS/Counters,计数器在使用前必须复位。
您可以将起始编号设置为任意值,默认值为0。
范例:
字符串
页面媒体不被任何主流的Web浏览器很好地支持,但被专门的HTML到PDF生成器支持,如Prince XML和WeasyPrint。
dgjrabp24#
通过Mozilla,(Printing a document)
这在每个打印页面上都放了一个页眉和页脚。这在Mozilla中工作得很好,但在IE和Chrome中就不太好了。
字符串
CSS:
型
yb3bgrhw5#
如果您希望在Chrome/Chromium下打印时添加页码,一个简单的解决方案是使用Paged.js。
这个JS库将你的HTML/CSS剪切成页面,准备打印成一本书,你可以在浏览器中预览。它使
@page
和大多数CSS3规范适用于Chrome。解决方案1(简单)如果您可以将视图切割为页面,准备打印
只需在页面的
head
标签中添加他们的CDN:字符串
然后,您可以使用自动计数器
page
添加页码。示例:将HTML放在您想要显示当前页码的任何位置:
型
CSS使数字出现在div中:
型
该库还允许轻松管理页面边距,页脚,页眉等。
解决方案2(更复杂)如果您只想在打印时显示数字(和分页)
在这种情况下,你只需要在打印文档时应用Paged.js CDN。我能想到的一种方法是添加一个
print me
按钮,它会触发JavaScript:1.将CDN添加到页面
1.然后执行
window.print();
启动导航器的打印提示