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

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

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

1 个答案: