如果 div 的高度不适合打印介质，是否插入分页符？

Question

我正在网页上动态创建要打印的元素。如果元素无法放入 A4 尺寸纸张的其余部分，我需要分页符。 例如这个问题：强制元素占据打印介质中可用高度的一半

在图片中，第一页上出现了一个损坏的元素，它实际上应该出现在第二页上。

如果元素不适合此页面，如何强制分页。 **我尝试过：**

我尝试使用 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

Answer 1

我在你的小提琴中注意到你只在几行之后应用了分页符。 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();
        });

    });

Answer 2

之前的答案很好，但有一个错误。您必须需要总高度。请检查这一点，我认为这段代码对您有帮助。我将此代码用于医院管理项目的打印系统。谢谢你。

jQuery(document).ready(function(){
        var prevRowHeight = 0;
        var total_height = 0;
        jQuery(".row").each(function(){

            // console.log($(this).height());
            var maxHeight = 1000;
            var eachRowHeight = jQuery(this).height();
            total_height += prevRowHeight + eachRowHeight;
            alert('now : '+total_height +' , Was: '+ prevRowHeight);
            if(total_height > maxHeight){
                jQuery(this).before('<div style="page-break-after:always"></div>');
                console.log("add page break before");
                now_height = 0;
            }
            prevRowHeight = jQuery(this).height();
        });

    });