我在要打印的网页上动态创建元素。如果元素无法容纳在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();
        });

    });

09-10 10:52
查看更多