Kendo UI for jQuery数据管理使用教程：Excel导出（二）

Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，本文将为大家介绍Grid小部件提供内置的Excel导出功能。

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

从Kendo UI Q3 2014（2014.3.1119）版本开始，Grid小部件提供内置的Excel导出功能。

导出从左到右的内容

excelExport事件允许您反转单元格并设置文本对齐方式，支持从右到左（RTL）语言。 要在Excel中从右到左的流程中呈现文档，请启用工作簿的rtl选项。

每行都有一个类型字段，可用于在网格中区分各种行类型。 支持的值为：

• “header”
• “footer”
• “group-header”
• “group-footer”
• “data”

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script><div class="k-rtl"><div id="grid" ></div></div><script>$("#grid").kendoGrid({toolbar: ["excel"],excel: {allPages: true},dataSource: {type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"},pageSize: 7},excelExport: function(e) {var workbook = e.workbook;var sheet = workbook.sheets[0];workbook.rtl = true;for (var i = 0; i < sheet.rows.length; i++) {for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {sheet.rows[i].cells[ci].hAlign = "right";}}},pageable: true,columns: [{ width: 300, field: "ProductName", title: "Product Name" },{ field: "UnitsOnOrder", title: "Units On Order" },{ field: "UnitsInStock", title: "Units In Stock" }]});</script>

导出多个网格

默认情况下，每个网格将其内容导出到单独的Excel工作表中。

在服务器上保存文件

要将生成的文件发送到远程服务，请防止保存默认文件并发布base64编码的内容。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script><div id="grid"></div><script>$("#grid").kendoGrid({toolbar: ["excel"],dataSource: {type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"},pageSize: 7},pageable: true,columns: [{ width: 300, field: "ProductName", title: "Product Name" },{ field: "UnitsOnOrder", title: "Units On Order" },{ field: "UnitsInStock", title: "Units In Stock" }],excelExport: function(e) {// Prevent the default behavior which will prompt the user to save the generated file.e.preventDefault();// Get the Excel file as a data URL.var dataURL = new kendo.ooxml.Workbook(e.workbook).toDataURL();// Strip the data URL prologue.var base64 = dataURL.split(";base64,")[1];// Post the base64 encoded content to the server which can save it.$.post("/server/save", {base64: base64,fileName: "ExcelExport.xlsx"});}});</script>

服务器端处理

要将庞大的数据集导出到Excel，请使用新的RadSpreadStreamProcessing库，该库是Telerik Document Processing (TDP) by Progress的一部分。

已知局限性

• 在客户端导出期间，网格及其数据源仅包含当前页面中的数据项。 结果，要么批量导出，要么禁用分页功能。
• 导出文件的最大大小具有系统特定的限制。 对于大型数据集，请使用RadSpreadStreamProcessing作为文档处理库的一部分提供的服务器端解决方案。
• 在较旧的浏览器（例如Internet Explorer 9和Safari）中，将网格导出到Excel需要实现服务器代理。
• 在Excel导出期间，网格不使用列模板，而是仅导出数据。 出现这种情况的原因是，列模板可能包含无法转换为Excel列值的任意HTML。
• 网格出于与未导出列模板相同的原因而不会导出其详细信息模板。
• 在Excel导出期间，网格不使用列格式，因为某些Kendo UI格式与Excel不兼容。 要格式化单元格值，请设置单元格的格式选项。

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：慧都