Add extra page in pdf when table doesn't fit in that page using Shield UI Export Pdf

Question

I am using ShieldUI for exporting HTML table to pdf. On using , my table content exceeds the page size height and rest of the contents are hidden from the page rather than displaying it in second page.

I want to move the rows that doesn't fit in that page to the next page.

Below is my code snippet:

<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

I try this code block. If you add the bottom margin, document will pass the second page.

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

Answer 2

From what I can see in the code, I am not sure that this functionality is supported by the exporting mechanism. What you can try instead is to toggle on paging when the grid is being shown on the page and then when exporting - disable the paging. This should show all records.