Exporting table to multipage PDF file using kendo exportPDF

Thread is closed for posting
19 posts, 0 answers
  1. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 26 Mar 2015 Link to this post

    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?
  2. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 30 Mar 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 31 Mar 2015 in reply to Mihai Link to this post

    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?
  5. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 31 Mar 2015 in reply to Mihai Link to this post

    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.
  6. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 01 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 01 Apr 2015 in reply to Mihai Link to this post


    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 ?

  8. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 01 Apr 2015 in reply to Mihai Link to this post

    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 ?
  9. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 02 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 20 Apr 2015 in reply to Mihai Link to this post

    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?

  11. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 22 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 11 May 2015 in reply to Mihai Link to this post

    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

  13. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 13 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 13 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 18 May 2015 Link to this post

    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?

  16. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 18 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Piotr
    Piotr avatar
    15 posts
    Member since:
    Feb 2015

    Posted 01 Dec 2015 Link to this post

    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

  18. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 03 Dec 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  19. Ashish
    Ashish avatar
    1 posts
    Member since:
    Dec 2016

    Posted 4 days ago Link to this post

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

     

  20. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 6 hours ago Link to this post

    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
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top
Kendo UI is VS 2017 Ready