Question

我使用ShieldUI将HTML表导出为pdf。在使用时，我的表格内容超出页面大小高度，其余内容将从页面隐藏，而不是在第二页中显示。

我想将不适合该页面的行移动到下一页。

以下是我的代码段：

<script>

jQuery(function ($) {
    $("#exportBt").click(function () {
        var dataSource = new shield.DataSource.create({
            data: "#admin-table",
            schema: {
                type: "table",
                fields: {
                    sno: {type: Number},
                    Name: {type: String},
                    Age: {type: Number},
                    Gender: {type: String},
                    Contact_Number: {type: Number},
                    Boarding_Point: {type: String},
                    Drop_Point:{type: String},
                    Seat_Number:{type: String}
                }
            }
        });

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

            pdf.addPage("a4", "potrait");
            pdf.table(
                    10,
                    10,
                    data,
                    [   {field: "sno", title: "#", width: 20},
                        {field: "Name", title: "Name", width: 100},
                        {field: "Age", title: "Age", width: 20},
                        {field: "Gender", title: "gender", width: 45},
                        {field: "Contact_Number", title: "Contact No", width: 82},
                        {field: "Boarding_Point", title: "Boarding Point", width: 100},
                        {field: "Drop_Point", title: "Drop Point", width: 100},
                        {field: "Seat_Number", title: "Seat No", width: 100}
                    ],
                    {
                        margins: {
                            top: 10,
                            left: 10
                        }
                    }
            );

            pdf.saveAs({
                fileName: "PrepBootstrapPDF"
            });
        });
    });
});
</script>

Answer 1

从我在代码中看到的内容，我不确定导出机制是否支持此功能。您可以尝试的是在页面上显示网格时切换分页，然后在导出时 - 禁用分页。这应该显示所有记录。

Answer 2

我尝试此代码块。如果添加底边距，则文档将通过第二页。

    <script>

jQuery(function ($) {
    $("#exportBt").click(function () {
        var dataSource = new shield.DataSource.create({
            data: "#admin-table",
            schema: {
                type: "table",
                fields: {
                    sno: {type: Number},
                    Name: {type: String},
                    Age: {type: Number},
                    Gender: {type: String},
                    Contact_Number: {type: Number},
                    Boarding_Point: {type: String},
                    Drop_Point:{type: String},
                    Seat_Number:{type: String}
                }
            }
        });

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

            pdf.addPage("a4", "potrait");
            pdf.table(
                    10,
                    10,
                    data,
                    [   {field: "sno", title: "#", width: 20},
                        {field: "Name", title: "Name", width: 100},
                        {field: "Age", title: "Age", width: 20},
                        {field: "Gender", title: "gender", width: 45},
                        {field: "Contact_Number", title: "Contact No", width: 82},
                        {field: "Boarding_Point", title: "Boarding Point", width: 100},
                        {field: "Drop_Point", title: "Drop Point", width: 100},
                        {field: "Seat_Number", title: "Seat No", width: 100}
                    ],
                    {
                        margins: {
                            top: 10,
                            left: 10, 
                            bottom: 10
                        }
                    }
            );

            pdf.saveAs({
                fileName: "PrepBootstrapPDF"
            });
        });
    });
});
</script>

使用Shield UI Export Pdf，当表格不适合该页面时，在pdf中添加额外页面

2 个答案: