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导出功能。

入门指南

要启用网格的Excel导出选项：

1. 引入相应的工具栏命令并设置导出设置。
   • 工具栏配置
   • Excel导出配置
2. 在页面上包含JSZip脚本。

要通过代码启动Excel导出，请调用saveAsExcel方法。

注意：

• 默认情况下，网格将导出应用了排序、过滤、分组和聚合数据的当前页面。
• 网格使用当前列顺序、可见性和尺寸来生成Excel文件。
• 网格不会在Excel文件中导出当前CSS主题。
• 网格仅导出数据绑定列，所有未设置其字段选项的列将被忽略。
• 导出期间不使用format选项。
• 导出期间不使用模板选项。
• 导出期间不使用detailTemplate选项。

下面的示例演示如何启用Grid的Excel导出功能。

<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"],
excel: {
fileName: "Kendo UI Grid Export.xlsx"
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>

 

配置

关于其Excel导出，网格使您能够：

• 将其所有页面导出到Excel
• 自定义导出的文件
• 导出RTL内容
• 导出多个网格
• 将文件保存在服务器上

导出所有页面

默认情况下，网格仅导出当前数据页面。 要导出所有页面，请将allPages选项设置为true。

注意：当allPages选项设置为true并启用serverPaging时，网格将对所有数据发出“读取”请求。 如果数据项太多，浏览器可能会无响应。 在这种情况下，请使用服务器端导出。

<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"],
excel: {
allPages: true
},
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" }
]
});
</script>

 

自定义导出的文件

要自定义生成的Excel文件，请使用excelExport事件，workbook事件参数公开生成的Excel工作簿配置。

---

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