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

Question

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

在此先感谢。

Answer 1

你有两个选择：

1. 定义与要导出为PDF当问及出口实际上出口的第二列第二格。两个网格应共享数据源，以便过滤，将会共享订单...。
2. 拦截pdfExport在生成PDF之前触发的事件，并使用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>