Kendo UI for jQuery數(shù)據(jù)管理使用教程：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是創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫。

從Kendo UI Q3 2014（2014.3.1119）版本開始，Grid小部件提供內(nèi)置的Excel導出功能。

導出從左到右的內(nèi)容

excelExport事件允許您反轉(zhuǎn)單元格并設置文本對齊方式，支持從右到左（RTL）語言。 要在Excel中從右到左的流程中呈現(xiàn)文檔，請啟用工作簿的rtl選項。

每行都有一個類型字段，可用于在網(wǎng)格中區(qū)分各種行類型。 支持的值為：

• "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>

導出多個網(wǎng)格

默認情況下，每個網(wǎng)格將其內(nèi)容導出到單獨的Excel工作表中。

在服務器上保存文件

要將生成的文件發(fā)送到遠程服務，請防止保存默認文件并發(fā)布base64編碼的內(nèi)容。

<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>

服務器端處理

要將龐大的數(shù)據(jù)集導出到Excel，請使用新的RadSpreadStreamProcessing庫，該庫是Telerik Document Processing (TDP) by Progress的一部分。

已知局限性

• 在客戶端導出期間，網(wǎng)格及其數(shù)據(jù)源僅包含當前頁面中的數(shù)據(jù)項。 結(jié)果，要么批量導出，要么禁用分頁功能。
• 導出文件的最大大小具有系統(tǒng)特定的限制。 對于大型數(shù)據(jù)集，請使用RadSpreadStreamProcessing作為文檔處理庫的一部分提供的服務器端解決方案。
• 在較舊的瀏覽器（例如Internet Explorer 9和Safari）中，將網(wǎng)格導出到Excel需要實現(xiàn)服務器代理。
• 在Excel導出期間，網(wǎng)格不使用列模板，而是僅導出數(shù)據(jù)。 出現(xiàn)這種情況的原因是，列模板可能包含無法轉(zhuǎn)換為Excel列值的任意HTML。
• 網(wǎng)格出于與未導出列模板相同的原因而不會導出其詳細信息模板。
• 在Excel導出期間，網(wǎng)格不使用列格式，因為某些Kendo UI格式與Excel不兼容。 要格式化單元格值，請設置單元格的格式選項。

---

了解最新Kendo UI最新資訊，請關(guān)注Telerik中文網(wǎng)！