根据随机生成的表格打印时动态创建分页符

Question

我正在尝试将分页符动态添加到动态创建的表单中。未知字段、未知页面长度等。这就是为什么我不能只使用纯 css 添加分页符的原因。

每个输入都有一个

.component

类，我试图循环并创建分页符。我认为我走在正确的轨道上，但还很遥远，并且在某处遗漏了一些东西。但我确实认为这是正确的选择。我附上了一些图片和代码片段。任何在正确轨道上的帮助将不胜感激。

$('#print').click(function () {

    var staticHeight = 0;
    var pageHeight = 1000;
    $('.component').each(function() {

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

        console.log("Static " + staticHeight)
        console.log("Page " + pageHeight)

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

    });

Answer 1

根据您提供的代码片段，您似乎走在正确的轨道上，可以将分页符动态添加到动态创建的表单中。但是，您可以进行一些修改以提高代码的功能和可靠性。

首先，重要的是要注意 outerHeight() 函数在其计算中包括填充、边框和边距。这意味着您的 staticHeight 变量可能大于 .component 元素的实际高度。为避免这种情况，您可以改用 height() 函数，它只包含内容高度。

其次，您应该考虑在添加分页符之后将 staticHeight 变量设置为 0，而不是在 if 语句中。这可确保在添加分页符后将 staticHeight 重置为 0，并为下一页重新开始计算。

最后，您可能想要添加一些额外的检查，以确保不会将分页符添加到空页中，并且确保最后一页没有分页符。您可以通过检查添加分页符后是否还有剩余的 .component 元素以及检查当前迭代是否是最后一个来完成此操作。

这是经过这些修改的代码的更新版本：

$('#print').click(function () {

    var staticHeight = 0;
    var pageHeight = 1000;
    var $components = $('.component:visible');

    $components.each(function(index) {

        staticHeight += $(this).height();

        console.log("Static " + staticHeight)
        console.log("Page " + pageHeight)

        if (staticHeight > pageHeight && index < $components.length - 1) {
            $(this).after('<div style="page-break-after: always"><b>----------Page Break---------</b></div>');
            staticHeight = 0;
        }

    });
});