Kendo-UI 无法导出为 PDF

Question

我正在尝试构建一个简单的 Kendo-UI 网格并允许用户将其导出为 PDF。我有格式化的列（日期和数字），我在导出 PDF 时隐藏了命令按钮。

当我尝试导出为 PDF 时，操作成功但 PDF 本身已损坏。在 Acrobat 中它说它无法打开文件，使用 FireFox 的 PDF 查看器它说 "This PDF document may not be displayed correctly"，我使用 IE 的 PDF 查看器时遇到类似的错误。看起来 headers 列已呈现，但 none 行已呈现。

奇怪的是导出到 Excel 工作正常，它只是导出到 PDF。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.mobile.min.css">
    <style>
      .k-command-cell .k-button {
        display: block;
        padding: 0.5rem 0;
      }

      #navigation {
        width: 100%;
      }

      .k-pdf-export .k-grid-toolbar,
      .k-pdf-export .k-grouping-header {
        display: none;
      }
    </style>
  </head>
  <body>
    <ul id="navigation">
      <li><a href="sugar.html">Blood Sugar</a></li>
      <li><a href="pressure.html">Blood Pressure</a></li>
      <li><a href="dietary.html">Dietary</a></li>
      <li><a href="reports.html">Reports</a></li>
    </ul>

    <div id="grid"></div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#navigation").kendoMenu();

        var dataSource = new kendo.data.DataSource({
          data: [{"SugarId":"1","UserId":"1","ReadDate":"2019-05-01","ReadTime":"09:02:00","BloodSugar":"176"},{"SugarId":"2","UserId":"1","ReadDate":"2019-05-02","ReadTime":"09:00:00","BloodSugar":"175"},{"SugarId":"3","UserId":"1","ReadDate":"2019-05-03","ReadTime":"09:07:00","BloodSugar":"166"},{"SugarId":"4","UserId":"1","ReadDate":"2019-05-04","ReadTime":"09:10:00","BloodSugar":"198"},{"SugarId":"5","UserId":"1","ReadDate":"2019-05-05","ReadTime":"08:22:00","BloodSugar":"182"},{"SugarId":"6","UserId":"1","ReadDate":"2019-05-06","ReadTime":"09:03:00","BloodSugar":"183"},{"SugarId":"7","UserId":"1","ReadDate":"2019-05-07","ReadTime":"09:03:00","BloodSugar":"171"},{"SugarId":"8","UserId":"1","ReadDate":"2019-05-07","ReadTime":"14:24:00","BloodSugar":"262"},{"SugarId":"9","UserId":"1","ReadDate":"2019-05-07","ReadTime":"20:04:00","BloodSugar":"168"},{"SugarId":"10","UserId":"1","ReadDate":"2019-05-08","ReadTime":"10:00:00","BloodSugar":"154"},{"SugarId":"11","UserId":"1","ReadDate":"2019-05-09","ReadTime":"21:50:00","BloodSugar":"174"},{"SugarId":"12","UserId":"1","ReadDate":"2019-05-10","ReadTime":"09:56:00","BloodSugar":"156"},{"SugarId":"18","UserId":"1","ReadDate":"2019-05-11","ReadTime":"09:38:00","BloodSugar":"170"},{"SugarId":"19","UserId":"1","ReadDate":"2019-05-12","ReadTime":"10:03:00","BloodSugar":"153"},{"SugarId":"20","UserId":"1","ReadDate":"2019-05-13","ReadTime":"09:52:00","BloodSugar":"163"},{"SugarId":"21","UserId":"1","ReadDate":"2019-05-14","ReadTime":"10:05:00","BloodSugar":"163"},{"SugarId":"22","UserId":"1","ReadDate":"2019-05-15","ReadTime":"10:05:00","BloodSugar":"178"},{"SugarId":"23","UserId":"1","ReadDate":"2019-05-16","ReadTime":"21:43:00","BloodSugar":"142"},{"SugarId":"24","UserId":"1","ReadDate":"2019-05-17","ReadTime":"21:33:00","BloodSugar":"135"},{"SugarId":"25","UserId":"1","ReadDate":"2019-05-18","ReadTime":"21:33:00","BloodSugar":"130"},{"SugarId":"26","UserId":"1","ReadDate":"2019-05-19","ReadTime":"09:33:00","BloodSugar":"153"},{"SugarId":"27","UserId":"1","ReadDate":"2019-05-20","ReadTime":"10:04:00","BloodSugar":"169"},{"SugarId":"28","UserId":"1","ReadDate":"2019-05-21","ReadTime":"09:54:00","BloodSugar":"155"},{"SugarId":"29","UserId":"1","ReadDate":"2019-05-22","ReadTime":"09:16:00","BloodSugar":"119"},{"SugarId":"30","UserId":"1","ReadDate":"2019-05-23","ReadTime":"09:42:00","BloodSugar":"153"},{"SugarId":"31","UserId":"1","ReadDate":"2019-05-24","ReadTime":"09:18:00","BloodSugar":"124"},{"SugarId":"32","UserId":"1","ReadDate":"2019-05-25","ReadTime":"09:14:00","BloodSugar":"141"},{"SugarId":"33","UserId":"1","ReadDate":"2019-05-26","ReadTime":"08:53:00","BloodSugar":"122"},{"SugarId":"34","UserId":"1","ReadDate":"2019-05-27","ReadTime":"09:06:00","BloodSugar":"129"},{"SugarId":"35","UserId":"1","ReadDate":"2019-05-28","ReadTime":"09:11:00","BloodSugar":"168"},{"SugarId":"36","UserId":"1","ReadDate":"2019-05-29","ReadTime":"09:01:00","BloodSugar":"148"},{"SugarId":"37","UserId":"1","ReadDate":"2019-05-30","ReadTime":"08:46:00","BloodSugar":"173"},{"SugarId":"38","UserId":"1","ReadDate":"2019-05-31","ReadTime":"08:38:00","BloodSugar":"163"},{"SugarId":"39","UserId":"1","ReadDate":"2019-06-01","ReadTime":"09:33:00","BloodSugar":"145"},{"SugarId":"40","UserId":"1","ReadDate":"2019-06-02","ReadTime":"09:33:00","BloodSugar":"156"},{"SugarId":"41","UserId":"1","ReadDate":"2019-06-03","ReadTime":"09:07:00","BloodSugar":"139"},{"SugarId":"42","UserId":"1","ReadDate":"2019-06-04","ReadTime":"09:40:00","BloodSugar":"145"},{"SugarId":"43","UserId":"1","ReadDate":"2019-06-05","ReadTime":"08:16:00","BloodSugar":"183"},{"SugarId":"44","UserId":"1","ReadDate":"2019-06-06","ReadTime":"10:08:00","BloodSugar":"136"},{"SugarId":"45","UserId":"1","ReadDate":"2019-06-07","ReadTime":"09:11:00","BloodSugar":"137"},{"SugarId":"46","UserId":"1","ReadDate":"2019-06-08","ReadTime":"09:58:00","BloodSugar":"130"},{"SugarId":"47","UserId":"1","ReadDate":"2019-06-09","ReadTime":"09:20:00","BloodSugar":"145"},{"SugarId":"48","UserId":"1","ReadDate":"2019-06-10","ReadTime":"08:48:00","BloodSugar":"167"},{"SugarId":"49","UserId":"1","ReadDate":"2019-06-10","ReadTime":"08:48:00","BloodSugar":"167"},{"SugarId":"50","UserId":"1","ReadDate":"2019-06-10","ReadTime":"08:48:00","BloodSugar":"167"}],
          page: 1,
          pageSize: 25,
          schema: {
            model:  {
              id: "SugarId",
              fields: {
                ReadDate: {
                  type: "date"
                },
                ReadTime: {
                  type: "date"
                },
                BloodSugar: {
                  type: "number"
                }
              }
            }
          }
        });

        var exportFlag = false;
        $("#grid").kendoGrid({
          columns: [
            {
              command: "edit",
              title: "Edit",
              width: "100px"
            },
            {
              command: "destroy",
              title: "Delete",
              width: "100px"
            },
            {
              field: "ReadDate",
              format: "{0: MMMM d, yyyy}",
              title: "Read Date"
            },
            {
              field: "ReadTime",
              format: "{0: hh:mm:ss tt}",
              title: "Read Time"
            },
            {
              field: "BloodSugar",
              format: "{0: n}",
              title: "Blood Sugar"
            }
          ],
          dataSource: dataSource,
          filterable: true,
          pageable: {
            pageSize: 25,
            pageSizes: [5, 25, 50, 100, "all"]
          },
          sortable: true,
          toolbar: [
            "create",
            "excel",
            "pdf",
            "search"
          ],
          pdfExport: function(e) {
            if (!exportFlag) {
              e.sender.hideColumn(0);
              e.sender.hideColumn(1);
              e.preventDefault();
              exportFlag = true;

              e.sender.saveAsPDF().then(function(){
                e.sender.showColumn(0);
                e.sender.showColumn(1);
                exportFlag = false;
              });
            }
          }
        });
      });
    </script>
  </body>
</html>

Fiddle: https://dojo.telerik.com/ONUNekaY

图片：

Answer 1

根据 GaloisGirl 的建议，我将错误报告给了 Telerik，可在此处找到：https://github.com/telerik/kendo-ui-core/issues/5761

该问题仅出现在 FireFox 中，因为 PDF 无法导出行的原因解释如下：

The font for the icons is missing and the browser couldn't cope with this.

解决方案是在 Kendo-UI 导入之后添加以下脚本：

<script> kendo.pdf.defineFont({ "WebComponentsIcons" : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf" }); </script>

定义字体后，导出为 PDF 即可。

我不确定 Telerik 是否会最终解决这个问题，但解决方案很简单，足以满足我的使用需求。

Kendo-UI 无法导出为 PDF

Kendo-UI Broken Export to PDF

jquery

kendo-ui

kendo-ui-grid