在使用page-break-inside时分页时添加标题:避免使用css或javascript或从浏览器中删除?

时间:2010-01-14 20:36:54

标签: javascript css browser printing printing-web-page

我有一个页面,其中的部分为div,内部div和内容。在打印时,div的数量从少于一页到多页不等。

我正在使用page-break-inside:避免在每个section div上,以便所有部分永远不会打印/分割2页。 (这个我只能在Firefox中工作,但整个其他故事......!)。

问题是我想在打印时将页眉图像添加到每个页面的顶部,但是使用了page-break-inside:避免使用css属性我不知道在打印时哪些地方添加了这些文件。

任何人都知道我可以实现这个目标吗?我能以某种方式找出分页的位置并在那里添加标题吗?或者有没有办法在浏览器中设置标题图像,就像你可以单词文档等?

请帮忙 非常感谢 瑞克

2 个答案:

答案 0 :(得分:0)

无法从JS / HTML / CSS控制打印页面,因为您无法访问打印驱动程序,因此您无法知道用户设置的纸张大小或边距。

要解决这个问题,您可以使用组件从HTML创建PDF,这样您就可以更好地控制布局。那必须在服务器端完成。

答案 1 :(得分:0)

我没有看到任何使用CSS2(spec)添加标题信息的方法。有一种方法可以使用CSS3(linkspec)将TEXT添加到“页眉”。我不确定这是否也会覆盖图像,但这是一个开始。您需要考虑CSS3 adoption,如果它适合您的业务需求(从维基百科链接看起来只有Opera支持@page选项,但该信息可能是陈旧的。)

我不认为你可以使用javascript将标题插入到每个页面上进行格式化打印时。我不知道如何做到这一点(但我可能错了)。

您可以做的是定义一个在浏览器页面上不可见但在打印页面上显示的div。这样的事情应该这样做:

<STYLE type="text/css">
@media print {
div.header {display:block;}
}
@media screen {
div.header {display:none;}
}
</STYLE>

然后,您可以在强制分页后放置包含标题的div。这应该适合你,进一步的CSS可能会被用来强制这个div与页面顶部对齐等等。当然,这还需要你使用强制分页符,这意味着你需要提前知道多少您可以适合页面的数据,并不理想。

希望这有帮助。