kendo-ui - 自定义 Kendo Grid pdf 导出中的数据

Question

我正在使用 Kendo Grid 的内置功能以 pdf 和 excel 格式导出网格数据 http://demos.telerik.com/kendo-ui/grid/pdf-export .它对我来说很好用。我想自定义导出的数据，即添加一些额外的列并删除一些网格列。有什么方法可以使用模板或其他一些功能来自定义导出数据。

提前致谢。

Answer 1

你有两个选择:

1. 定义第二个网格，其中包含要导出为 PDF 的列，并在要求导出时实际导出第二个。两个网格应共享数据源，以便共享过滤、订单...。
2. 拦截在生成 PDF 之前触发的 pdfExport 事件，并使用 showColumn 和 hideColumn 方法隐藏/显示列。

以下代码显示了第二种方法(尽管我个人更喜欢第一种方法)。您会看到，在单击导出按钮之前，您会看到 EmployeeID，但 PDF 不包含此列，但包含 Country。

$(document).ready(function() {
  kendo.pdf.defineFont({
    "DejaVu Sans"             : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
    "DejaVu Sans|Bold"        : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
    "DejaVu Sans|Bold|Italic" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
    "DejaVu Sans|Italic"      : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
  });
  
  var grid = $("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
      fileName: "Kendo UI Grid Export.pdf",
      proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
    },
    dataSource: {
      type: "odata",
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
        }
      }
    },
    columns: [
      { 
        title: "Photo", 
        width: 140, 
        template :'<img src="http://demos.telerik.com/kendo-ui/content/web/Employees/#: data.EmployeeID #.jpg" alt="#: EmployeeID #" />'
      },
      { field: "FirstName" },
      { field: "LastName" },
      { field: "Country", hidden: true },
      { field: "EmployeeID" }
    ],
    scrollable: false,
    pdfExport: function(e) {
      grid.showColumn(3);            
      grid.hideColumn(4);            
    }
  }).data("kendoGrid");
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/pako_deflate.min.js"></script>

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