Export to PDF

7 posts, 0 answers
  1. Ryan
    Ryan avatar
    1 posts
    Member since:
    Nov 2015

    Posted 25 Nov 2015 Link to this post

    Hi,

    I'd like to export the grid to PDF, and need to add column headers on each page.

    I was able to apply the page template (page header and footer), but couldn't add the column headers on the grid on each page..

    Also, I'd like to change font size when it exports to PDF. how can I change the font size?

     

    Thank you,

     

     

    // Export handler
      $("#export").on("click", function () {
       var grid = $("#grid").data("kendoGrid");
       grid.hideColumn(3);
      grid.columns[0].width = "60px";
       grid.columns[1].width = "60px";
       grid.refresh();
       kendo.drawing.drawDOM("#grid", {
        forcePageBreak: ".page-break",
        paperSize: "Legal",
        landscape: true,
        margin: {
         left   : "2mm",
         top    : "30mm",
         right  : "2mm",
         bottom : "40mm"
        },
        template: $("#page-template").html()
       })
       .then(function (group) {
        kendo.drawing.pdf.saveAs(group, "CFCReport.pdf");
        var grid = $("#grid").data("kendoGrid");
        grid.showColumn(3);
       grid.refresh();
       }); 

  2. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 26 Nov 2015 Link to this post

    Hello Ryan,

    Thank you for contacting us.

    I would recommend you to examine the following help article which elaborates more on your requirement. Generally the topic demonstrates how to customize the pdf layout the way you prefer.

    I hope this information helps.

    Regards,
    Kostadin
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Ofer
    Ofer avatar
    4 posts
    Member since:
    Apr 2016

    Posted 19 Apr 2016 in reply to Kostadin Link to this post

    I have a issue with the page template:

    When My code is this:

        function getPDF(selector) {
            kendo.drawing.drawDOM($(selector))
    .then(function(group){
             kendo.drawing.pdf.saveAs(group, "Narrative.pdf",{
                    paperSize: "Letter",
                    margin: { left: "1cm", top: "1cm", right: "2cm", bottom: "1cm" }
                });
            });
          } it creates the PDF fine.

    But when I change it, so I can add the page template later,

    the code

         function getPDF(selector) {
            kendo.drawing.drawDOM($(selector, {
            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: "Narrative.pdf",
    proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
    });
    });
          }

    does not create a PDF

    can you tell me what I am missing?

  4. Daniel
    Admin
    Daniel avatar
    4949 posts

    Posted 21 Apr 2016 Link to this post

    Hello Ofer,

    I created a simple demo which looks like yours and behaves as expected. You can test it here:
    http://dojo.telerik.com/IsOgU

    Let me know if I'm missing something.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Khanh
    Khanh avatar
    17 posts
    Member since:
    May 2018

    Posted 14 Sep 2018 Link to this post

    Dear Admin,

    I have an issue regarding to export pdf kendo grid with group header: Sort icon & menu context icon are too weirded in PDF file. Could you please give me some suggestions ? Thank you so much.

    Steps to reproduce:

    1. Create a group by, sort a column as the attached image.

     

    2. Click export PDF

    Actual result: Sort icon & menu context icon are too weirded in PDF file (please refer the attached image).

    Expected result: The exported pdf file displays as well as data in kendo grid.

    This is my code:

    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    <!DOCTYPE html>
    <html>
    <head>
        <base href="https://demos.telerik.com/kendo-ui/grid/multicolumnheaders">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />
        <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    </head>
    <body>
            <div id="example">
                <div id="grid"></div>
                <script>
                    $(document).ready(function () {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                                },
                                pageSize: 20
                            },
                            toolbar: ["pdf"],
                            pdf: {
                                    fileName: 'abc.pdf',
                                    allPages: true,
                                    paperSize: 'auto',
                                    margin: { top: "3cm", right: "1cm", bottom: "1cm", left: "1cm" },
                            },
                            height: 550,
                            groupable: true,
                            sortable: true,
                            resizable: true,
                            reorderable: true,
                            pageable: true,
                            columnMenu: true,
                            columns: [{
                                field: "CompanyName",
                                title: "Company Name",
                                width: 420
                            },
                            {
                              field: "Country",
                              title: "Country",
                              width: 200
                            },        
                            {
                              field: "City",
                              title: "City",
                              width: 200
                            },        
                            {
                              field: "Phone",
                              title: "Phone",
                              width: 200
                            },         
                       ]});
                    });
                </script>
            </div>


    </body>
    </html>
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

  6. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 17 Sep 2018 Link to this post

    Hello Khanh,

    When the stylesheet and font files used in the page are hosted on a different domain (CDN in this case), you need to explicitly define the fonts, which should be loaded while exporting the Grid to PDF. In this case, you would need to define WebComponentsIcons.ttf, which contains the Kendo UI icons:
    <script>
      kendo.pdf.defineFont({
      });
    </script>

    Here, you can see that icons load as expected in the exported document:
    http://dojo.telerik.com/@tsveti/eLayACAv



    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Khanh
    Khanh avatar
    17 posts
    Member since:
    May 2018

    Posted 18 Sep 2018 in reply to Tsvetina Link to this post

    Thanks so much Tsvetina, it works fine for me.
Back to Top