Question

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

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

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

<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

以“960px”为中断的“脚本”之后的示例...

<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以使其在Fiddle上工作

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;
            }

        });

});

动态分页 - Jquery

2 个答案: