CODEWITHSUNDEEP
javascriptpdfkendo-ui
Manoj Pilania
Manoj Pilania

Reputation: 666

Export to PDF using Kendo UI (issue with RTL languages)

I am using given code to export html page to pdf by using drawDom method:

    $(function(){ 
        $('#ExportToPdf').on("click", function (e) {
            var selectedTab = $('.selected-tab').attr("id");
            selectedTab = selectedTab.replace("tab-", "#");
            var fileName = $(selectedTab).find($('.report-title')).text().replace(' ', '_');
            kendo.drawing.drawDOM($(selectedTab))
             .then(function (group) {
                 // Render the result as a PDF file
                 return kendo.drawing.exportPDF(group, {
                     paperSize: "auto",
                     margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                 });
             })
             .done(function (data) {
                 // Save the PDF file
                 kendo.saveAs({
                     dataURI: data,
                     fileName: fileName + ".pdf"
                 });
             });
        });
    });

But result is given below for Arabic characters enter image description here

I want this result:

enter image description here

I tried every thing what I get on internet.

Adding different types of fonts for unicode and kendo builtin fonts but all in vein.

Upvotes: 6

Views: 9342

Answers (3)

Dror Bar
Dror Bar

Reputation: 718

This question is 8 months old, so you might have found a solution by now. I just wanted to share my own solution, which is a bit of a hack, but at least it works for me.

Basically, you want to flip the text in the html using the special command: ‭

For example - ‭ grid.client.name (grid.client.name is just an example, replace with where you store the arabic names. Repeat for each cell that contains arabic text).

You will notice now that the text in the pdf is no longer shrinked - but it actually has the wrong direction now. How to fix this? - well, you simply reverse the arabic text in the code (so basically we reverse the text twice). An example method to reverse a string:

function reverseString(str) {
    var newString = "";
    for (var i = str.length - 1; i >= 0; i--) {
      newString += str[i];
    }
    return newString;
  }

Apply this to all of your data that contains arabic text.

If you've done both of these things, it should now appear correctly after exporting to pdf.

Good Luck.

Upvotes: 1

Manoj Pilania
Manoj Pilania

Reputation: 666

I made temporary solution that I convert the report into canvas then I exported to pdf. I html2canvas to export html in to canvas. if any one find another solution please let me know.

 $('#ExportToPdf').on("click", function (e) {
     html2canvas(document.querySelector("#widget-47")).then(canvas => {
         $("#widget-47").hide();
         $("#widget-47").parent().append(canvas);
     });
     setTimeout(function () {
         kendo.drawing.drawDOM($('#kendo-wrapper'))
          .then(function (group) {
              // Render the result as a PDF file
              return kendo.drawing.exportPDF(group, {
                  paperSize: "auto",
                  margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
              });
          })
          .done(function (data) {
              // Save the PDF file
              kendo.saveAs({
                  dataURI: data,
                  fileName: "report.pdf"
              });
              $("#widget-47").siblings().remove();
              $("#widget-47").show();
          });
     }, 3000);
 });

Upvotes: 0

Emin Dönmez
Emin Dönmez

Reputation: 1

Here is KENDO UI tutorial and it works fine for me.Can you rewrite your code by analyze this code? If the problem is still continue then we try to find solution again.

<script>
    // Import DejaVu Sans font for embedding

    // NOTE: Only required if the Kendo UI stylesheets are loaded
    // from a different origin, e.g. cdn.kendostatic.com
    kendo.pdf.defineFont({
        "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
        "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
        "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
        "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
        "WebComponentsIcons"      : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
    });
</script>

<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/pako_deflate.min.js"></script>

<script>
$(document).ready(function() {

    $(".export-pdf").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function(group) {
            // Render the result as a PDF file
            return kendo.drawing.exportPDF(group, {
                paperSize: "auto",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            });
        })
        .done(function(data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.pdf",
                proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
            });
        });
    });

    $(".export-img").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function(group) {
            // Render the result as a PNG image
            return kendo.drawing.exportImage(group);
        })
        .done(function(data) {
            // Save the image file
            kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.png",
                proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
            });
        });
    });

    $(".export-svg").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function(group) {
            // Render the result as a SVG document
            return kendo.drawing.exportSVG(group);
        })
        .done(function(data) {
            // Save the SVG document
            kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.svg",
                proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
            });
        });
    });


    var data = [{
      "source": "Approved",
      "percentage": 237
    }, {
      "source": "Rejected",
      "percentage": 112
    }];

    var refs = [{
      "source": "Dev",
      "percentage": 42
    }, {
      "source": "Sales",
      "percentage": 18
    }, {
      "source": "Finance",
      "percentage": 29
    }, {
      "source": "Legal",
      "percentage": 11
    }];

    $("#applications").kendoChart({
      legend: {
        position: "bottom"
      },
      dataSource: {
        data: data
      },
      series: [{
        type: "donut",
        field: "percentage",
        categoryField: "source"
      }],
      chartArea: {
          background: "none"
      },
      tooltip: {
        visible: true,
        template: "${ category } - ${ value } applications"
      }
    });

    $("#users").kendoChart({
        legend: {
            visible: false
        },
        seriesDefaults: {
            type: "column"
        },
        series: [{
            name: "Users Reached",
            data: [340, 894, 1345, 1012, 3043, 2013, 2561, 2018, 2435, 3012]
        }, {
            name: "Applications",
            data: [50, 80, 120, 203, 324, 297, 176, 354, 401, 349]
        }],
        valueAxis: {
            labels: {
                visible: false
            },
            line: {
                visible: false
            },
            majorGridLines: {
                visible: false
            }
        },
        categoryAxis: {
            categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
            line: {
                visible: false
            },
            majorGridLines: {
                visible: false
            }
        },
        chartArea: {
            background: "none"
        },
        tooltip: {
            visible: true,
            format: "{0}",
            template: "#= series.name #: #= value #"
        }
    });

    $("#referrals").kendoChart({
      legend: {
        position: "bottom"
      },
      dataSource: {
        data: refs
      },
      series: [{
        type: "pie",
        field: "percentage",
        categoryField: "source"
      }],
      chartArea: {
          background: "none"
      },
      tooltip: {
        visible: true,
        template: "${ category } - ${ value }%"
      }
    });

    $("#grid").kendoGrid({
      dataSource: {
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 15,
        group: { field: "ContactTitle" }
      },
      height: 450,
      groupable: true,
      sortable: true,
      selectable: "multiple",
      reorderable: true,
      resizable: true,
      filterable: true,
      pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
      },
      columns: [
        {
          field: "ContactName",
          template: "<div class=\'customer-name\'>#: ContactName #</div>",
          title: "Contact",
          width: 200
        },{
          field: "ContactTitle",
          title: "Contact Title",
          width: 220
        },{
          field: "Phone",
          title: "Phone",
          width: 160
        },{
          field: "CompanyName",
          title: "Company Name"
        },{
          field: "City",
          title: "City",
          width: 160
        }
      ]
    });
   });
</script>
<style>
    /*
        Use the DejaVu Sans font for display and embedding in the PDF file.
        The standard PDF fonts have no support for Unicode characters.
    */
    .k-widget {
        font-family: "DejaVu Sans", "Arial", sans-serif;
        font-size: .9em;
    }
</style>

<style>
.export-app {
    display: table;
    width: 100%;
    height: 750px;
    padding: 0;
}

.export-app .demo-section {
    margin: 0 auto;
    border: 0;
}

.content-wrapper {
    display: table-cell;
    vertical-align: top;
}

.charts-wrapper {
    height: 250px;
    padding: 0 0 20px;
}

#applications,
#users,
#referrals {
    display: inline-block;
    width: 50%;
    height: 240px;
    vertical-align: top;
}
#applications,
#referrals {
    width: 24%;
    height: 250px;
}

.customer-photo {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: 40px 44px;
    background-position: center center;
    vertical-align: middle;
    line-height: 41px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
}
.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 41px;
    padding-left: 10px;
}
</style>
<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/pdf-export/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
 
    <div class="box wide hidden-on-narrow">
        <h4>Export page content</h4>
        <div class="box-col">
            <button class='export-pdf k-button'>Export as PDF</button>
        </div>
        <div class="box-col">
            <button class='export-img k-button'>Export as Image</button>
        </div>
        <div class="box-col">
            <button class='export-svg k-button'>Export as SVG</button>
        </div>
    </div>

    <div class="demo-section k-content export-app wide hidden-on-narrow">
        <div class="demo-section content-wrapper wide">
          <div class="demo-section charts-wrapper wide">
            <div id="users"></div>
            <div id="applications"></div>
            <div id="referrals"></div>
          </div>
          <div id="grid"></div>
        </div>
    </div>
    
    <div class="responsive-message"></div>
</div>

</body>
</html>

Upvotes: 0

Related Questions