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

已知侷限性

• 在客戶端導出期間，網格及其數據源僅包含當前頁面中的數據項。 結果，要麼批量導出，要麼禁用分頁功能。
• 導出文件的最大大小具備系統特定的限制。 對於大型數據集，請使用RadSpreadStreamProcessing做爲文檔處理庫的一部分提供的服務器端解決方案。
• 在較舊的瀏覽器（例如Internet Explorer 9和Safari）中，將網格導出到Excel須要實現服務器代理。
• 在Excel導出期間，網格不使用列模板，而是僅導出數據。 出現這種狀況的緣由是，列模板可能包含沒法轉換爲Excel列值的任意HTML。
• 網格出於與未導出列模板相同的緣由而不會導出其詳細信息模板。
• 在Excel導出期間，網格不使用列格式，由於某些Kendo UI格式與Excel不兼容。 要格式化單元格值，請設置單元格的格式選項。

---

瞭解最新Kendo UI最新資訊，請關注Telerik中文網！