剑道-UI中断导出为PDF

问题描述 投票：0回答：1

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

当我尝试导出为PDF时，操作是成功的，但PDF本身是坏的。在Acrobat中，它说无法打开文件，使用FireFox的PDF查看器，它说 "这个PDF文档可能无法正确显示"，而我使用IE的PDF查看器也得到了类似的错误。它看起来像列头得到渲染，但没有行。

奇怪的是，导出到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.comONUNekaY。

图片。acrobat error

jquery kendo-ui kendo-ui-grid
1个回答
0
投票

根据GaloisGirl的建议，我向Telerik报告了这个错误，可以在这里找到。https:/github.comtelerikkendo-ui-coreissues5761。

这个问题只存在于FireFox中，因为PDF无法导出行的原因是这样解释的。

图标的字体缺失，浏览器无法处理。

解决方法是在Kendo-UI导入后，添加以下脚本。

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

一旦定义了字体，导出到PDF就可以了。

我不确定Telerik是否会在他们那边修复这个问题，但这个解决方案非常简单，可以满足我的使用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.