使用page-break-inside时，在分页符时添加标题：避免使用CSS或JavaScript还是从浏览器中删除？

Question

我有一个页面，其中包含具有内部div和内容的div部分。 打印时div的数量从不到一页到很多页不等。

我正在使用page-break-inside：避免在每个div分区上使用，以使所有部分都不会打印/拆分为2页。 （这只是我在firefox上的工作，但还有其他整个故事……。）。

问题是我想在打印时在每个页面的顶部添加页眉图像，但要使用page-break-inside：避免使用css属性，我不知道在哪里添加页眉，因为这在打印时有效。

有人知道我能做到吗？ 我能以某种方式找出分页符的位置并在其中添加标题吗？ 还是有一种在浏览器中设置标题图像的方式，例如可以对文档进行文字处理？

请帮忙谢谢很多里克

Answer 1

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

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

Answer 2

我看不到使用CSS2（ spec ）添加标头信息的任何方式。 有一种使用CSS3将文本添加到“页面标题”的方法（ link ， spec ）。 我不确定这是否还会涵盖图像，但这只是一个开始。 您将需要考虑采用 CSS3，如果它适合您的业务需求（从Wikipedia链接看来，只有Opera支持@page选项，但是该信息可能是过时的）。

我认为在格式化打印页面时，您无法使用javascript将标头注入到每个页面上。 我不知道该怎么做（但是我可能错了）。

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

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

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

希望这可以帮助。