击“了解更多”获取工具

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)方法。