擊“了解更多”獲取工具

Kendo UI for jQuery 在R2 2021中發布了重大的更新，添加了一些非常漂亮的組件，包括新的TaskBoard組件和其他要求很高的功能，本系列文章將為大家一一揭秘，歡迎收藏關注！

擴展的組件功能

jQuery Grid：范圍選擇導出到Excel

在R2 2021中，Kendo UI for jQuery Data Grid新增了將選定的單元格導出到Excel的功能，這是一個非常巧妙的功能，因為您可以選擇任意隨機的單元格集（甚至是彼此完全斷開的單元格），并且jQuery Grid會以直觀的方式將您選擇的內容導出到Excel文件。

jQuery TreeList：篩選器行

為了確保使用R2 2021在jQuery Data Grid和TreeList之間建立奇偶校驗，將為Kennedy UI for jQuery TreeList組件正式引入過濾器行功能。 啟用此功能后，將在TreeList頂部的列標題正下方顯示專用的過濾器元素行。

jQuery TreeList：行模板

jQuery TreeList強烈要求的功能是能夠為整行定義自定義模板。之前開發人員只能逐列定義自定義模板，但是對于R2 2021，我們現在將行模板功能引入Kendo UI for jQuery TreeList。現在您可以完全控制TreeList中任何行的布局，甚至可以創建自定義元素來控制展開和折疊功能。

jQuery PDF Generator：導出任何SVG

在R2 2021中，Kendo UI for jQuery PDF Export庫現在支持從HTML生成PDF文件時導出任何SVG元素，當傳入HTML元素并將其所有內容導出到PDF文件時，這提供了更大的靈活性。

jQuery Scheduler：分層分組

Kendo UI for jQuery Scheduler通過一種新的分層分組功能，收到了一種在R2 2021中組織事件的新方法，這使用戶可以在一個或多個父事件或資源下組織事件。例如，對于一家擁有多個辦公室的公司，每個辦公室都有多個會議室和會議組織者。 在這種情況下，jQuery Scheduler將為按會議室分組的每個組織者顯示日歷。

jQuery Scheduler: Year視圖

在已經廣泛應用的視圖集（日、周、工作周、月、議程和時間軸）基礎上，jQuery Scheduler在R2 2021中獲得了Year View。 這使用戶可以一次查看整個一年，并在一天中安排了活動時顯示指標。有關更多詳細信息，用戶可以將鼠標懸停或單擊適當的日期來查看彈出窗口，該彈出窗口顯示在該特定日期安排了哪些事件。

jQuery Scheduler：更新24小時事件的渲染

總結使用R2 2021添加到Kendo UI for jQuery Scheduler的功能之后，我們現在有了更新的方式來顯示24小時（或24小時以上）事件。以前，這些類型的事件將顯示在計劃程序頂部的“全天”區域，同時將“常規”天留空來為其他事件騰出空間（類似于Outlook）。借助這一新功能，用戶可以將事件作為一個大事件占用一整天，甚至跨越多天。

jQuery Editor：通過拖動處理程序調整圖像大小

Kendo UI for jQuery Editor添加了使用拖動在jQuery編輯器組件的內容中調整任何圖像大小的功能。 啟用此功能后，無論何時用戶選擇圖像元素，他們都會看到拖動出現時，可以將圖像調整為所需的大小。

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

首先呢，ajax是的請求數據類型時json,html等形式，實際上是字符串類型，而不是流類型（二進制編碼），所以后臺不能響應下載操作，但是ajax可以讀取后臺返回的數據。

我使用jquery開發的輕量級web項目，但是有個需求是需要下載項目中計算出來的數據，并按一定排版排布生成pdf或者word文檔。由于前端的插件下載的pdf布局比較受限，容易產生不清晰，亂碼等問題，所以只能后臺進行。既然ajax不能響應，我采取的方式是模擬表單點擊，發送數據到后臺，然后在后臺進行排版并下載pdf。代碼如下：

然后對模擬表單下載的代碼進行封裝成一個方法，往里面傳入URL，還有需要填充進pdf的數據fileValue,代碼如下：

本例是demo，所以使用servlet，進行簡單的數據收發。通過如下代碼接收數據：

response.setContentType("text/html;charset=utf-8");

String fileName = request.getParameter("fileName");

然后就是后臺的工作了，這里可以簡單進行說明一下，也可以自己操作，后臺實現下載pdf,word需要借助幾個jar包：itextpdf-5.5.jar與itext-asian-5.2.0.jar可以下載pdf,另外的兩個可以下載word。使用時注意引入問題。

后臺需要事先準備一個pdf放入lib或者其他文件夾中，用來做為模板，往里面寫入數據；需要封裝一個寫入數據后在前臺生成pdf的方法，同時需要寫一個排版數據的方法，由于篇幅有限，這里就不放代碼了。效果如下：

這樣一點擊下載，數據發送到后臺，進入到排布的方法寫入模板，同時保存的方法讀取該模板，前臺就出現保存或自動下載pdf文件了，一份高清的pdf就生成了。

原創不易，歡迎大家點贊，可以互相討論，共同進步，謝謝！

evExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExtreme Complete Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

導出為PDF

要啟用Data Grid的PDF導出選項，請導入jsPDF庫。在組件中，設置export.enabled屬性為true然后指定導出格式。接下來的操作顯示DataGrid中的Export按鈕，單擊此按鈕時，將觸發dataGrid.onExporting函數（其中開發者應該調用pdfExporter.exportDataGrid(options)方法）。

<dx-data-grid ...
(onExporting)="onExporting($event)"
>
<dxo-export
[enabled]="true"
[formats]="['pdf']"
></dxo-export>
</dx-data-grid>

import { Component } from '@angular/core';
import { exportDataGrid } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';

// ...

export class AppComponent {
onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
}).then(() => {
doc.save('DataGrid.pdf');
});
}
}

單元格自定義

開發人員可以自定義單元格內容并在PDF文檔中繪制自定義單元格。

customizeCell函數允許開發者為導出的PDF文檔自定義單個DataGrid單元格的外觀(例如，可以更改單元格使用的字體樣式)。

onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
customizeCell({ gridCell, pdfCell }) {
//...
}
}).then(() => {
doc.save('DataGrid.pdf');
});
}

如果希望在繪制單元格時覆蓋默認繪制邏輯并應用自己的繪制邏輯，請使用customDrawCell函數。在下面的例子中，這個函數在PDF文檔中為" Website "列繪制并自定義一個單元格：

onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
customDrawCell({ gridCell, pdfCell }) {
//...
}
}).then(() => {
doc.save('DataGrid.pdf');
});
}

頁眉和頁腳

開發人員可以輕松地向導出的DataGrid添加頁眉和頁腳。

DataGrid組件位于PdfExportDataGridProps中指定點的PdfExportDataGridProps.topLeft 屬性的頁眉之前。

對于頁腳位置，使用customDrawCell函數，這個函數允許開發者計算組件最右邊單元格的坐標。

導出圖片

jsPDF庫API還允許將自定義內容導出為PDF(如圖像)，對于圖像導出，可以調用jsPDF.addImage方法，然后處理onRowExporting事件為導出的DataGrid定制行。

onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
onRowExporting: (e) => {
// Customize rows
},
customDrawCell: (e) => {
// Detect picture cell
doc.addImage(e.gridCell.value, 'PNG', e.rect.x, e.rect.y, e.rect.w, e.rect.h);
e.cancel = true;
}
}).then(() => {
doc.save('DataGrid.pdf');
});
}

導出多個網格

要將多個DataGrid組件導出到一個文件中，并在PDF文檔的不同頁面上排列它們，請在Promises鏈中使用pdfExporter.exportDataGrid(options)方法。