如何使用jspdf自动中断页面

Question

我有一个选项供用户根据用户的选择添加更多行。 如果我添加的行多于9或10，则页面中断，最后一行变成一半。 我有3个按钮添加 ， 删除和保存 。

• 添加-添加更多行。
• 删除-减少行数。
• 保存-另存为pdf。

这是我添加和删除行的脚本。

脚本：添加和删除行。

$(document).ready(function ()
    {
        $("#addMore").click(function ()
        {
            $("#customFields").append('<tr><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>');
        });

        $("#removeRow").click(function()
        {   
            if ($('#customFields tbody tr').length== 1)
            {
                alert('Error');
            }
            else
            {
                $('#customFields tr:last').remove();
            }

        });

    });

脚本：另存为pdf。

$("#save").click(function ()
    {
        var values = "";

            //i is the iterator and c is the control. So every elements iterates through the second input of callback function in this case the c variable. c is literally this current element in the array/

        $.each($(".form-control"), function(i, c)
        {
            values = values + $(c).val().trim(); // .trim() to remove white-space
        });

        if(values.length > 0)
        {       

            html2canvas(document.getElementById("captureMyDiv"),
            {
                onrendered: function(canvas)
                {
                    var img = canvas.toDataURL("image/png");
                    var doc = new jsPDF();
                    doc.addImage(img, 'JPEG',0,0);
                    doc.save('text.pdf');
                }
            });

        }

        else
        {
            alert('Cannot be left blank');
        }
    });

HTML：

<div class = "col-md-8" id = "captureMyDiv">

    <div class="jumbotron text-center">
    <h2 style = "text-align: center">REQUISITION AND ISSUE SLIP</h2>
    <h4 style = "text-align: center">NATIONAL LABOR RELATIONS COMMISSION</h4>
    </div>

        <form class = "form-vertical">
            <div class = "form-group">
                <label class = "control-label">Department:</label>
                <input type = "text" class = "form-control">
            </div>
            <div class = "form-group">
                <label class = "control-label">Office:</label>
                <input type = "text" class = "form-control">
            </div>
            <div class = "form-group">
                <label class = "control-label">Responsibility Center Code:</label>
                <input type = "text" class = "form-control">
            </div>
            <div class = "form-group">
                <label class = "control-label">RIS No:</label>
                <input type = "text" class = "form-control">
            </div>
            <div class = "form-group">
                <label class = "control-label">SAI No:</label>
                <input type = "text" class = "form-control">
            </div>
        </form>

    <table class = "table" id = "customFields">
        <thead>
            <tr>
                <th>Stock No.</th>
                <th>Unit</th>
                <th>Description</th>
                <th>Quantity</th>
            </tr>
        </thead>

        <tbody>

        <tr>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
        </tr>

        </tbody>
    </table>
    <button type = "submit" class = "btn btn-primary" id = "addMore">+ Add</button>
    <button type = "submit" class = "btn btn-danger" id = "removeRow">- Remove</button>
    <button type = "submit" class = "btn btn-success" id = "save">Save</button>
</div>

屏幕截图：

Answer 1

结合使用css属性来制动页面上的元素，例如

page-break-after,page-break-before,page-break-inside

了解更多信息