动态分页 - Jquery

Question

我正在为动态生成的可打印页面创建脚本。由于该页面是即时生成的，并且各部分可能具有不同的高度，因此插入到标记中的预定分页类不会削减它。为了解决这个问题，我使用data-print =“section”属性检查每一个的高度。

我在努力的是......每个data-print =“section”需要产生一个运行总数。当该总数大于变量“pageHeight”时，它将插入以强制内容到第二页。插入分页符后，需要重新启动运行总计，并在总和大于“pageHeight”时插入另一个分页符。

之前示例 “脚本” 与960像素休息...

<div class="item" data-print="section"></div> = 400px 
<div class="item" data-print="section"></div> = 200px 
<ul data-print="section"> = 300px 
    <li> 
    <li> 
</ul> 
<div class="item" data-print="section"></div> = 50px 
<div class="item" data-print="section"></div> = 100px 

示例 “脚本” 后，在960像素休息...

<div class="item" data-print="section"></div> = 400px 
<div class="item" data-print="section"></div> = 200px 
<ul data-print="section"> = 300px 
    <li> 
    <li> 
</ul> 
<div class="item" data-print="section"></div> = 50px 
<div class="page-break"></div> 
<div class="item" data-print="section"></div> = 100px 

当前脚本

$('[data-print=section]').each(function() { 

    var staticHeight = $(this).filter(':visible').outerHeight(true); 
    var pageHeight = 400 

    console.log(staticHeight) 

    if ($(this).height() > pageHeight) { 
     $(this).after('<div class="page-break"></div>'); 
    } 

}); 

在此先感谢

Answer 1

在每个范围外设置变量staticHeight，并在添加分页符时重置它。看到这里

var staticHeight = 0; 
var pageHeight = 100 
$('[data-print=section]').each(function() { 

    staticHeight += $(this).filter(':visible').outerHeight(true); 


    console.log(staticHeight) 

    if (staticHeight > pageHeight) { 
     $(this).after('<div class="page-break">Page Break</div>'); 
     staticHeight = 0; 
    } 

}); 

http://jsfiddle.net/3C4x7/

我设置pageHeight 100得到它的提琴工作

Answer 2

不能完全确定，我得到您的标记，但像这样将增加一个新的分页符前部分的总高度超出了您设置的页面限制。

$(function(){ 

    var pageHeight = 100, 
     staticHeight = 0, 
     pageBreak = '<div class="page-break">Page Break</div>'; 

    $('[data-print=section]') 
     .filter(':visible') 
     .each(function() { 

      elHeight = $(this).outerHeight(true); 
      var total = elHeight + staticHeight; 

      if (total > pageHeight){ 
       $(this).after(pageBreak); 
       console.log(staticHeight); 
       staticHeight = 0; 
      } else { 
       staticHeight += elHeight; 
      } 

     }); 

});