我正在尝试改进使用Webkit打印的html文档的外观,在这种情况下,通过对发生分页的位置施加一些控制。
我可以在需要的地方插入分页符:
page-break-after: always;
但是,我找不到一种方法来避免在项目中间插入分页符。例如,我有html表,不应在多个页面的中间拆分。我的印象是
page-break-inside: avoid;
会阻止分页插入元素内,但它似乎没有做任何事情。我的代码如下:
.dontsplit { border: 2px solid black; page-break-inside: avoid; }
<table class="dontsplit">
<tr><td>Some title</td></tr>
<tr><td><img src="something.jpg"></td></tr>
</table>
尽管有page-break-inside:avoid指令我仍然将第一行和第二行之间的表拆分为单独的页面。
有什么想法吗?
答案 0 :(得分:17)
下载了wkhtmltopdf http://code.google.com/p/wkhtmltopdf/的最新二进制文件,以下内容似乎有效。
.dontsplit { border: 2px solid black; page-break-inside: avoid; }
<table>
<tr><td><div class="dontsplit">Some title</div></td></tr>
<tr><td><div class="dontsplit"><img src="something.jpg"></div></td></tr>
</table>
参考:http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21
谨慎放置边距,并在td上填充零,并将任何内容放在div上,否则你将获得“边缘”使其超过折叠
答案 1 :(得分:5)
正如cliffordlife所说,
.dontsplit { border: 2px solid black; page-break-inside: avoid; }
会奏效。但不适用于Firefox。在firefox中,您要做的是检查高度,然后在相关时添加page-break-after: always;
。
平均而言,顶部和底部的边距为1英寸。因此,为了测量10英寸页面消耗的像素数,我使用了这个:
var pageOfPixels;
(function(){
var d = document.createElement("div");
d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;");
document.body.appendChild(d);
pageOfPixels = $(d).height();
d.parentNode.removeChild(d);
})();
我有很多div,每个div都有很多段落。所以我做的是迭代它们,然后将当前页面上它们的当前高度与pageOfPixels值进行比较。
var currentPosition = 0;
$('.printDiv').each(function (index, element) {
var h = $(this).height();
if (currentPosition + h > pageOfPixels) {
//add page break
$('.printDiv').eq(index - 1).css("page-break-after", "always");
currentPosition = h;
} else {
currentPosition += h;
}
});
这在firefox中对我有用。
答案 2 :(得分:1)
没关系:看起来这是一个webkit问题: