使用 Kendo UI 导出为 PDF(RTL 语言问题) [英] Export to PDF using Kendo UI (issue with RTL languages)

问题描述

我正在使用给定的代码通过 drawDom 方法将 html 页面导出为 pdf:

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 tried every thing what I get on internet.

为 unicode 和 kendo 内置字体添加不同类型的字体，但都是在静脉中.

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

推荐答案

这个问题已经有 8 个月了，所以您现在可能已经找到了解决方案.我只是想分享我自己的解决方案，这有点黑客，但至少它对我有用.

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.

基本上，您想使用特殊命令翻转 html 中的文本:‭

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

例如 - ‭grid.client.name(grid.client.name 只是一个示例，替换为您存储阿拉伯名称的位置.对包含阿拉伯文本的每个单元格重复).

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).

您现在会注意到 pdf 中的文本不再缩小 - 但它现在实际上有错误的方向.如何解决这个问题?- 好，您只需反转代码中的阿拉伯文本(因此基本上我们将文本反转两次).反转字符串的示例方法:

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.

如果您已经完成了这两件事，那么在导出为 pdf 后，它现在应该可以正确显示了.

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

祝你好运.

这篇关于使用 Kendo UI 导出为 PDF(RTL 语言问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！