使用Kendo UI导出为PDF（RTL语言问题）

Question

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

    $(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"
                 });
             });
        });
    });

但下面给出了阿拉伯字符的结果

我想要这个结果：

我尝试了我在互联网上得到的所有东西。

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

Answer 1

这是KENDO UI教程，它适用于我。您可以通过分析此代码重写代码吗？如果问题仍然存在，那么我们会再次寻找解决方案。

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

Answer 2

这个问题是8个月大，你现在可能已经找到了解决方案。

我只是想分享一个愚蠢但有效的解决方案（你知道他们说什么，如果它是愚蠢但有效......）。

基本上，您希望使用特殊命令翻转html中的文本：‭

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

现在你会注意到pdf中的文字不再缩小 - 但它现在实际上有错误的方向。如何解决这个问题？ - 这是愚蠢的部分： 你只需在代码中反转阿拉伯语文本（所以基本上我们将文本反转两次）。反转字符串的示例方法：

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

将此应用于包含阿拉伯语文本的所有数据。

如果你已经完成了这两件事，那么现在应该在导出到pdf之后正确显示（至少它对我有用）。

祝你好运。

Answer 3

我制作了临时解决方案，我将报表转换为画布然后导出为pdf。我用html2canvas将html导出到画布中。如果有人找到另一个解决方案，请告诉我。

 $('#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);
 });