我在要打印的网页上动态创建元素。如果元素无法容纳在A4尺寸纸张的其余部分中,我想进行分页。
示例是此问题:Force an element to take exactly half of available height in print media
在图片中,第一页上出现了一个损坏的元素,该元素实际上应该在第二页上。
如果元素不适合此页面,如何强制分页。
**我尝试过的:**
我试图通过以下代码使用css page-break
after`属性:
$(document).ready(function(){
$(".row").each(function(){
if($(this).height()>$(document).height()/2){
$(this).after('<div style="page-break-after:always"></div>');
}
});
});
但这行不通。
这是一个JsFiddle
最佳答案
我在您的小提琴中注意到,仅在几行之后才应用了分页符。 jQuery代码的问题在于,与每行相比,$(document).height()
将返回巨大的值。在您的情况下,文档高度= 3861,而每行只有537。因此537永远不会大于3861/2。重新访问您需要应用分页符的确切条件。我尝试使用window.height相反,它的工作原理。
注意:您只能看到打印预览中的差异
编辑:
您能否删除所有手动添加的分页符div,然后尝试以下脚本。
我试图捕获先前的元素高度,然后计算是否需要分页。
为此,考虑到A4纸可以容纳多少,我将文档的maxHeight保持为1024。可以根据您的纸张尺寸随意调整maxHeight。
$(document).ready(function(){
var prevRowHeight = 0;
$(".row").each(function(){
// console.log($(this).height());
var maxHeight = 1024;
var eachRowHeight = $(this).height();
if((prevRowHeight + eachRowHeight) > maxHeight){
$(this).before('<div style="page-break-after:always"></div>');
console.log("add page break before");
}
prevRowHeight = $(this).height();
});
});