动态分页 – Jquery

我正在为动态生成的可打印页面创建脚本。 因为此页面是动态生成的，并且这些部分可能具有不同的高度，所以在标记中插入的预定分页符类不会将其剪切掉。 为了解决这个问题，我正在使用data-print =“section”属性检查每个高度。

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

“脚本”之前的示例，中断为960px …

 = 400px 
 = 200px 
 = 300px 
 
 
 
 = 50px 
 = 100px 

“脚本”之后的示例，中断为960px …

 
 = 400px 
 = 200px 
 = 300px 
 
 
 
 = 50px 
 
 = 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( '
'); } }); 

提前致谢

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( '
Page Break
'); staticHeight = 0; } }); 

http://jsfiddle.net/3C4x7/

我将pageHeight设置为100以使其在Fiddle上运行

Answer 2

不完全确定我得到你的标记，但这样的东西会在部分的总高度超过你设置的页面限制之前添加一个新的分页符。

 $(function(){ var pageHeight = 100, staticHeight = 0, pageBreak = '
Page Break
'; $('[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; } }); });