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的一部分。

已知局限性