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

Question

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

I want this result:

I tried every thing what I get on internet.

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

Answer 1

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.