Exporting table to multipage PDF file using kendo exportPDF

[Piotr]

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?

[Mihai]

Hello,

For automatic page breaking, the paperSize and margin options must be moved to drawDOM, instead of exportPDF.  This should fix both the issues.  Example:

    kendo.drawing.drawDOM($("#temp-container"), {
        paperSize: "A4",
        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",
            proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
        });
    });

Regards,
Mihai
Telerik

 

 

[Piotr]

Thanks, works like a charm!
But I have another problem. Images are missing in footer and header. 
Entire page content is visible but footer and header are inside 'script' tag and images have not time to load correctly before exporting to pdf. Images in page content loads correctly only if I apply setTimeout function on kendo.drawing.drawDOM.
Is there way to load images before exporting?
Is there way to skip setTimeout function and apply i.e. onLoad function?

[Piotr]

Hmm... is there way to register my own font "ArialUni.ttf" in pdf exporting? In example above polish chars are missing. I tried to do that with kendo.pdf.defineFont but it's not working.

[Mihai]

Hi,

About images, there was a related fix recently so can you try using the latest internal build?

About fonts, you should declare your font with a font-face CSS declaration, and make sure it is used by the browser to render the page.  See example in the documentation.  You only need to add the kendo.pdf.defineFont call if the CSS resides on a different domain.

Regards,
Mihai
Telerik

 

 

[Piotr]

I am using the last internal build 1.327.
This is my code

<script type="x/kendo-template" id="page-template">
    <div class="page-template" style="position:absolute;left:0px;right:0px;height:100px;">
        <div class="footer" style="position:absolute;bottom:0px;left:0px;right:0px;height:150px;border:1px solid;background:url('http://docs.telerik.com/kendo-ui/images/kendo-ui.png') no-repeat;background-size:100% 100%;">
           <p style="position:absolute;top:0px;right:0px;width:100px;">test</p>
        </div>
   </div> 
</script>

and function:

kendo.drawing.drawDOM(tempContainer, {
                    paperSize: "A4",
                    margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" },
                    template: $("#page-template").html()
                }).then(function (group) {
                    return kendo.drawing.exportPDF(group);
                }).done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "HR-Dashboard.pdf",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                    });

                    tempContainer.remove();
                });

Images in footer are missing. Without <script type="x/kendo-template" id="page-template"> tag images loads correctly.

One more thing about fonts. When I export chart in this way

kendo.drawing.drawDOM($("#ia-funnelchart-sell"), {
                    paperSize: "A4",
                    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
                }).then(function (group) {
                    return kendo.drawing.exportPDF(group);
                }).done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "HR-Dashboard.pdf",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                    });
                });

everything works fine, but If i try to export chart in this way

$("#ia-funnelchart-sell").getKendoChart().exportPDF({ 
                    paperSize: "auto", 
                    margin: { 
                        left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                }).done(function(data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.pdf",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                    });

default font is still DejaVu.
Why font is not applied in .getKendoChart().exportPDF ?

[Mihai]

Hi,

It works for me with a local image.  In your example, you load the image from docs.telerik.com, but the server over there does not emit access control headers to permit other domains to load images from there.  Please try with a local image.

About the fonts, it's not clear from your example.  Could you provide a sample that I can actually run?

In any case, it's worth noting that the two examples aren't exactly equivalent.  Passing the paperSize to drawDOM will request automatic page breaking, which does not happen in the second example which calls exportPDF directly on the widget.  When automatic page breaking is on, things happen a little different (the DOM content is cloned before being rendered).  A chart widget will not be split across pages, anyway, because of the limitations described in this section.

Regards,
Mihai
Telerik

 

 

[Piotr]

Hi again, thanks for your responses. I still have an issue with local images. My server supports cross origin but files are downloaded by function i.e 

http://127.0.0.1:10000/getimage/TFile.GetFile/" + serverFileName

Images in footer/header are missing, so I decided to change a way to load image to base64 string

 data:image/png;base64,BASE_64_STRING

but now all images are missing. Is there way to force export function to work with base64 images?

[Mihai]

Hello,

There was a recent fix (yesterday) about base64-encoded images stored as `data:...` URI.  Please wait for the next internal build and retry then.  Let us know if you still can't get it working.

Regards,
Mihai
Telerik

 

 

[Piotr]

Hi again, I download latest internal build 1.430. I have the same issue in headers and footers. Here is dojo code. 

http://dojo.telerik.com/ONITa

This is the list of my problems, please help me to solve that.

1) Header is not defined and top margin is set to 1cm. First page of pdf is rendered correctly (13 lines in table element), but on the next pages table is moved by 200px from top (just like table definition in the first page). Is there way to set top of table element which sets top 0 in another pages? Please see pdf file in dojo.
2) Footer/header images are missing (int this example I don't include header because issue #1).
3) Why page content overlaps footer in page 1?

Regards

[Mihai]

Hi Piotr,

Sorry for the delay.  I had to fiddle a bit with your example to get it working.  Here is a list of issues with it:

1. For the first issue, you really need to avoid absolute positioning of the elements before the table, and let the table flow with the content rather than placing it 200px from the top.  This is the reason the table shows 200px from the top on every page -- since we simply split the element at page breaks, the table would still have this style on subsequent pages.  I managed to get a similar layout without using absolute positioning, and removed position: relative; top: 200px from the table.

2. For the page-template DIV you should not set any styles.  I removed position: absolute and the height.  I also placed it outside the rendered element (it doesn't have to be inside, although technically it should not be a problem).

3. The table is split at paper size minus margin.  Your example defined a 1cm bottom margin, but a 150px footer.  The 150px means approximately 5.30cm in the PDF (please see this section for size calculations).  I therefore made the bottom margin 6cm and now the table won't overlap with the footer.

See the fixed example here: http://dojo.telerik.com/ONITa/2

One remaining issue is that the image in the footer does not show up, indeed.  I will attempt to fix that and will get back to you when I have a solution.

Regards,
Mihai
Telerik

 

 

[Mihai]

Hello Piotr,

I managed to fix the issue.  Unfortunately, the bug is in Kendo so you'll have to wait for the next internal build to get the fix.  Using the latest code I was able to get the attached PDF from your example.

Regards,
Mihai
Telerik

 

 

[Piotr]

Thanks for help, now I understand and my pdf works like a charm! :)

A have noticed during pdf preparation that dotted border is not supported. Am i wrong? Please check this example: http://dojo.telerik.com/iQUMu

 I need to generate dotted border but kendo's pdf has solid border. How can I accomplish this?

[Mihai]

Hi Piotr,

Indeed, that's a known limitation.  Non-solid border styles are not yet implemented.  Sorry about this inconvenience -- for the time being, my suggestion would be to use some light grey color to distinguish that border.

Regards,
Mihai
Telerik

 

 

[Piotr]

Hi again, today I encountered another problem and I don't know how to fix it. Please help.

Here is a dojo: http://dojo.telerik.com/IdeQI

The problem is that I need to split <td> element between the pages when <td> contains a ver long text. As you see in dojo header of column has normal position, but the content of table starts at page 2 and it's truncated at the bottom of the page. 

According to this: http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom I positioned my table relative. But still doesn't work. 

Please explain me where I'm making mistakes.

Regards

[T. Tsonev]

Hello,

Table rows (and their associated cells) will not be split across pages. As far as I know, this is a technical limitation that is not going away anytime soon.

The only advice we have for the moment is to use an "regular" layout based on divs. You should be able to use display: table without issues.

Regards,
T. Tsonev
Telerik

 

 

[Ashish]

i have problem this code function generatePDF()
 {
     kendo.drawing.drawDOM($("#pdf"),{
                            forcePageBreak: "#page-break",
                            //paperSize: "A4"
                           // multiPage: false,
                            margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" }
                            //margin: {
                               //       left   : "1.0in",
                              //        top    : "0.75in",
                               //       right  : "0.75in",
//bottom : "1.44in"
                                 //   }
})
                    .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: "Inspection_report.pdf"
                        });
                    });
 } 

problem is that its 2 page save in pdf  and this pdf print the page 1 page normal size but 2 page is so big how to resolve plzz tell me????

 

[T. Tsonev]

Hello,

I'm afraid the provided information is not sufficient to replicate the issue.

I'd ask you to open a separate forum thread with any additional details that you can provide.

Regards,
T. Tsonev
Telerik by Progress