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中文網！