Exporting table to multipage PDF file using kendo exportPDF

Question

I need to export large table to pdf file using kendo pdfExport. This code I have so far:

html:

<div style="position:relative;" id="temp-container">
    <div style="position:absolute;left:0px;top:50px;width:100%;background:url('http://127.0.0.1:8000/images/arrow1.png') no-repeat;height:50px;"></div>
    <div style="position:absolute;left:26%;top:50px;font-size:28px;">Number</div>
    <div style="position:absolute;left:50%;margin-left:-50px;width:100px;top:90px;font-size:28px;">Original</div>

    <div style="position:absolute;right:0px;width:33%;top:50px;">Date1</div>
    <div style="position:absolute;right:0px;width:33%;top:80px;">Date2</div>
    <div style="position:absolute;right:0px;width:33%;top:110px;">Date3</div>

    <div style="position:absolute;left:0px;right:0px;top:150px;background:url('http://127.0.0.1:8000/images/arrow3.png') no-repeat;height:50px;background-size:100% 100%;"></div>

    <table cellpadding="6px" cellspacing="3px" border="0px" style="width:100%;position:relative;top:200px;">
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
    </table>
</div>

and this is pdf export function call:

setTimeout(function () {
            kendo.drawing.drawDOM($("#temp-container"))
                .then(function (group) {
                    // Render the result as a PDF file
                    return kendo.drawing.exportPDF(group, {
                        paperSize: "A4",
                        multiPage: true,
                        margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" }
                    });
                })
                .done(function (data) {
                    // Save the PDF file
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "HR-Dashboard.pdf",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                    });
                });
        }, 1000);

My problem is that generated file has one page only. According to documentation http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#automatic-page-breaking-q1-2015 my table cannot be positioned as fixed or absolute and is not. I need to apply autopaging because I don't know how many elements will be in table. In example above is a lot of them but in some other cases one or two elements only. What am I doing wrong?

And another problem that drives me crazy is that I cannot adjust papersize. I tried to set A4, A5 in exportPDF attributes and set width and height of main container in inches. But still the generated document is not properly adjusted. I think that paperSize A4 should automatically adjust main container to A4 size?

Answer 1

I had the same issue

I realized that the demos on kendos website are wrong

Here is how it supposed to look

       kendo.drawing.drawDOM($("#temp-container"),{

                            paperSize: "A4",
                            multiPage: true,
                            margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" }
})
                    .then(function (group) {
                        // Render the result as a PDF file
                        return kendo.drawing.exportPDF(group);
                    })
                    .done(function (data) {
                        // Save the PDF file
                        kendo.saveAs({
                            dataURI: data,
                            fileName: "HR-Dashboard.pdf"
                        });
                    });

hope it helps

Answer 2

Options 1: You must add the argument multiPage: true to the exportPDF call. Also, make sure to include elements with class page-break in your HTML, at the places where you want to create a new page. E.g. open html span class="page-break" close span.

Options 2: Check this one for grid print http://demos.telerik.com/kendo-ui/grid/pdf-export.

Answer 3

I don't know if this will fix your problem, however I notice that you have several DIVs within your table that have the style position set to absolute. Maybe that is what's making it grumpy?