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="http://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: "http://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="http://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: "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" }
],
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不兼容。 要格式化單元格值，請設置單元格的格式選項。

---