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="http://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: "http://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="http://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: "http://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工作簿配置。

---