65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Kendo 控件在 Angular 中导出 CSV

Schatak
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2019年7月23日

CPOL

4分钟阅读

viewsIcon

10576

downloadIcon

174

在本文中，我们将学习如何在 Angular 中使用 Kendo UI 控件导出 CSV 文件。

引言

Kendo UI Grid for Angular 以表格格式显示数据，并具有许多功能。以下是一些功能：

数据操作

  • 数据绑定
  • 编辑
  • 过滤
  • 分组
  • 分页
  • 排序

导出选项

  • Excel
  • PDF

高级实现

  • 行渲染
  • 工具栏模板
  • 响应式设计
  • 层级等。

本文中我们关注的重点是**导出选项**，而不是 Excel 和 PDF，而是 CSV（Kendo 不提供内置功能）。CSV 是导出表格数据的非常常见的格式。
在本文中，我们将学习如何在 Angular 中使用 Kendo UI 以 CSV 格式导出数据。

必备组件

注意：如果您熟悉 Kendo Grid with Angular 中的 PDF 和 Excel 导出，则可以跳过此部分，因为您应该已经知道如何设置和安装 Kendo UI 控件。

  • 具备 Angular 的基础知识
  • Kendo UI 控件的基础知识
  • 设置 Angular 项目

    最简单的方法是使用 Angular CLI 工具：

    npm install -g @angular/cli
  • 添加 Kendo UI 组件（使用 Angular CLI）

    要从 Kendo UI for Angular 安装任何包，您可以使用 “ng-add” 并添加 NPM 包的名称。例如，grid 包的名称是：

    ng add @progress/kendo-angular-gird
  • 该命令将安装所有必要的包并导入组件模块。

    Kendo UI Grid（我们刚刚添加到 Angular 项目中的）以表格格式显示数据。安装模块后，在您的应用程序根模块或功能模块中导入 GridModule。您可以通过以下 官方文档 轻松完成此操作。

  • 要熟悉导出选项，请访问 链接。

    注意：下载源代码后，请安装 npm 包以使其成为一个可运行的应用程序。由于大小限制，我不得不排除应用程序中的 node_module 包。以下是命令：

    {your_drive_path}:\kendo-angular-CSVExport> npm install

开始吧

应用程序的外观如下（Application.jpg）。

具有数据的网格，这是 Kendo 网格控件的默认设置。（有关 Kendo 网格在官方网站上绑定的信息，请参见上面的链接。）
以下是应用程序的结构（一个非常基础的 Angular 应用）：

在 data 文件夹中，有一个文件 “products.data.ts”。此文件用于绑定网格数据。一个简单的 JSON 格式文件，易于理解。在实际场景中，用户可能需要通过 API 调用（超出本文范围）与数据库绑定数据。

文件夹中的第二个文件是 “MapExportData.ts”。此文件用于将网格数据映射到导出格式（在本例中为 CSV）。在这里，您进行映射并为 CSV 创建逐行数据。需要映射到 CSV 的列（用户可能不需要将网格中的所有列都导出到 CSV）。

在 Interfaces 文件夹中，有一个文件 “IExport.ts”，其中包含两个接口，一个用于列标题，另一个用于映射列标题和其他属性。在本例中，我们有要绑定的数据、列标题以及不需要包含在导出文件中的列标题。

在 Models 文件夹中，有一个文件 “export-headers.model.ts”。基本上，此文件用于映射字段及其对应的标题到选定的列。

在 services 文件夹中，有一个文件 “export.service.ts”，该文件包含将数据转换为导出格式的实际逻辑。

我们还有 app.component.html/ts 组件来完成 Angular 部分。

Using the Code

在应用程序中，我尝试遵循正确的数据流方法。

Kendo grid UI：app.component.html

<kendo-grid [data]="gridData" [height]="410">
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price" width="80">
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="In stock" width="80">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" title="Discontinued" width="120">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
</kendo-grid>

绑定 Kendo grid：app.component.ts

// import the data file for products
import { products } from 'src/app/data/products.data';

//gridData is the variable used to bind kendo grid.
public gridData: any[] = products;

在 app.component.html 中，有一个按钮，其点击事件调用 TypeScript 方法 “exportToCSV()”。

<button kendoButton (click)="exportToCSV()" [look]="'outline'">Export to CSV</button>

这是该方法：

exportToCSV() {
this.title = 'Exporting to CSV';
var exportData: IExport = {
data: this.gridData.map(x => MapExportData.mapProducts(x)),
columnHeaders: ExportColumnHeaders.ProductColumns,
columnHeaderNotToBeIncluded: []
}
this.exportService.ExportToCSV(exportData);
}

由于我们正在实现一个具有 data、columnHeaders 和 columnHeaderNotToBeIncluded 属性的接口。在 data 中，我们使用 mapProducts() 方法过滤要显示的列来映射网格数据。

点击按钮后，此方法将进一步调用 export.service.ts 中的方法。

// Export to csv file

ExportToCSV(exportConfig: IExport) {
/* If you want to give custom file name
make a form with input file e.g.fileName control and ask user for the input 
and it will be custom file name for your CSV something like this.

//let filename = this.customFileNameForm.controls["fileName"].value + ".csv";

*/

let fileName = "ExportCSV.csv"
this.ConvertDataToCSVFile(exportConfig.columnHeaders,exportConfig.data, 
                          exportConfig.columnHeaderNotToBeIncluded,fileName);
}
// Method to convert data into CSV format

ConvertDataToCSVFile(HeaderColumns: any[], data: any, 
                 HeaderColumnsIgnored: any[], filename: string) {
let csvArray: any;
const replacer = (key, value) => value === null ? '' : 
      (value.toString().indexOf('"') > 0 ? 
      value.replace(/"/g, " ") : value); // specify how you want to handle null values here

if (data.length > 0) {
const header_original = Object.keys(data[0]).filter(function (item) {
return HeaderColumnsIgnored.indexOf(item) === -1
});
const header_show = header_original.map(function (value: string, index: number) {
return HeaderColumns.filter(function (item) { return item.field === value })[0].title
});
let csv = data.map(row => header_original.map
          (fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
csv.unshift(header_show.join(','));
csvArray = csv.join('\r\n');
}
else {
// no record rows
const header_show = HeaderColumns.map(function (value: string, index: number) {
return value["title"];
});
let csv = data.map(row => header_show.map
          (fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
csv.unshift(header_show.join(','));
csvArray = csv.join('\r\n');
}
var a = document.createElement('a');
var blob = new Blob([csvArray], { type: 'text/csv' }),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
}

问题？

如果您对本文有任何疑问，请随时提出。希望这对您的应用程序有所帮助。
编码愉快！:)

历史

  • 2019年7月23日：初始版本
© . All rights reserved.