在Kendo Grid pdf导出中自定义数据 [英] Customize the data in Kendo Grid pdf export

问题描述

我正在使用Kendo Grid的内置功能以pdf和excel格式导出网格数据.

I am using the built in functionality of Kendo Grid to export the grid data in pdf and excel http://demos.telerik.com/kendo-ui/grid/pdf-export. It is working fine for me. I want to customize the data that is exported i.e. add some additional columns and remove some of the columns of grid. Is there any way to customize the export data using templates or some other feature.

谢谢.

推荐答案

您有两个选择:

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

1. Define a second grid with the columns that you want to export to PDF and when asked to export actually export the second. Both grids should share the datasource so filtering, orders... will be shared.
2. Intercept pdfExport event that is fired before the PDF is generated and hide/show the columns using showColumn and hideColumn methods.

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

The following code shows second approach (despite I -personally- prefer first). You will see that before clicking on export button you see EmployeeID but the PDF does not contain this column but includes 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>

这篇关于在Kendo Grid pdf导出中自定义数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！