Добавьте дополнительную страницу в PDF, если таблица не помещается на этой странице, используя Shield UI Export Pdf

Я использую 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>

pdf jquery shieldui
person Sriram J    schedule 01.10.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Из того, что я вижу в коде, я не уверен, что эта функциональность поддерживается механизмом экспорта. Вместо этого вы можете попробовать включить пейджинг, когда сетка отображается на странице, а затем при экспорте - отключить пейджинг. Это должно показать все записи.

person Yavor Angelov    schedule 04.10.2017

arrow_upward
0
arrow_downward

Я пробую этот блок кода. Если вы добавите нижнее поле, документ пропустит вторую страницу.

    <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>
person faddaledemir    schedule 27.03.2020