Web开发实用技能，看Kendo UI for jQuery如何导出Excel(二)

点击“了解更多”获取Kendo UI for jQuery R2 2020 SP1试用版下载

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不兼容。 要格式化单元格值，请设置单元格的格式选项。