导出为 pdf 时，表格不适合时应添加另一页

Question

我知道我的代码中遗漏了一些东西。在导出为 PDF 时，当表格不能全部放在一起时，它应该自动添加另一页。它还在tr 的中间切断了桌子。我试过page-break-inside:'avoid' 但没有成功。我环顾四周的与此相关的答案似乎对我不起作用。

CSS：

table,
table tr td,
table tr th {
    page-break-inside: avoid;}

表格导出：

jQuery(function ($) {
    $("#exportButton").click(function () {
        var dataSource = shield.DataSource.create({
            data: "#centralTable",
            schema: {
                type: "table",
                fields: {
                    No: { type: Number },
                    Unit: { type: String },
                    Rent: { type: Number },
                    Utilities: { type: String },
                    Pets: { type: String},
                    Other: { type: String},
                    Description: {type:String},
                    Status: {type: String}
                }
            }
        });

        dataSource.read().then(function (data) {
            var pdf = new shield.exp.PDFDocument({
                author: "PrepBootstrap",
                created: new Date()
            });

            pdf.addPage("a4", "landscape");
            pdf.table(
                50,
                50,
                data,
                [
                    { field: "No", title: "#", width:30 },
                    { field: "Unit", title: "Unit#", width: 50 },
                    { field: "Rent", title: "Rent", width: 70 },
                    { field: "Utilities", title: "Utilities", width: 70 },
                    { field: "Pets", title: "Pets", width: 70 },
                    { field: "Other", title: "Other", width: 70 },
                    { field: "Description", title: "Description", width: 200 },
                    { field: "Status", title: "Status", width: 100 }
                ],
                {
                    margins: {
                        top: 50,
                        left: 50
                    }
                }
            );

            pdf.saveAs({
                fileName: "testexport"
            });
        });
    });
});

HTML：

<table id="centralTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
        <tr>
          <th>No</th>
          <th>Unit</th>
          <th>Rent</th>
          <th>Utilities</th>
          <th>Pets</th>
          <th>Other Payment</th>
          <th>Description of other payment</th>
          <th>Status</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th scope="row">1</th>
          <td>CEN01</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        </tbody>

Answer 1

尝试添加以下 css：

table tr th, table tr {position: relative;}

显然，父元素和要控制分页的元素都必须声明为相对位置。