前言
CE版本实现演示
组件设置页面修改
- 添加「启用数据导出选项」
- 源码实现
组件右上角导出数据按钮实现
- 源码实现
translate相关
时间段选择
优化
- rpc,static,alarm去掉图例中的启用数据导出选项
- 效果
测试
数据格式整理及导出具体实现

前言

PE版本有CSV/XLS数据导出功能，具体视频演示查看官方文档地址。

对此功能的描述如下：
ThingsBoard允许您将数据从小部件导出到CSV或XLS。几乎任何小部件都支持此功能。
导出数据集中的列列表与您在数据集配置中配置的参数列表相对应。

CE版本实现演示

点击查看【bilibili】

注意：
调试前端代码在ui-ngx目录下打开命令行执行yarn start 进行调试，更改后自动重新编译前端，不需要重复启动项目。
thingsboard版本 3.2.0

组件设置页面修改

添加「启用数据导出选项」

可通过此选项启用或关闭数据导出功能

源码实现

主要修改下列文件（添加注释部分代码。官方源码部分有省略，减少篇幅）
ui-ngx/src/app/modules/home/components/widget/
widget-config.component.html
377行

<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="8px" fxFlex.sm="40%" fxFlex.gt-sm="30%">
  <mat-checkbox formControlName="enableFullscreen">
    {{ 'widget-config.enable-fullscreen' | translate }}
  </mat-checkbox>
  <!--添加数据导出按钮↓↓↓-->
  <mat-checkbox formControlName="enableDataExport">
    {{ 'widget-config.enable-data-export' | translate }}
  </mat-checkbox>
</div>

widget-config.component.ts
208行

this.widgetSettings = this.fb.group({
  dropShadow: [null, []],
  enableFullscreen: [null, []],
  //添加是否允许数据导出变量
  enableDataExport: [null, []],
  backgroundColor: [null, []],
  ...
});

379行

this.widgetSettings.patchValue({
  dropShadow: isDefined(config.dropShadow) ? config.dropShadow : true,
  enableFullscreen: isDefined(config.enableFullscreen) ? config.enableFullscreen : true,
  //是否允许数据导出 设置默认值
  enableDataExport: isDefined(config.enableDataExport) ? config.enableDataExport : true,
  backgroundColor: config.backgroundColor,
  ...
},

ui-ngx/src/app/shared/models/widget.models.ts
369行

export interface WidgetConfig {
  dropShadow?: boolean;
  enableFullscreen?: boolean;
  //添加是否允许数据导出变量
  enableDataExport?: boolean;
  useDashboardTimewindow?: boolean;
  ...
}

组件右上角导出数据按钮实现

源码实现

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
123行添加俩个注释中间部分

注意：<mat-icon>{{'archive'}}</mat-icon> 中的archive代表图标样式，其他mat-icon标签同理可替换图标可以在https://www.materialpalette.com/icons中找到喜欢的进行替换。

<button mat-button mat-icon-button *ngFor="let action of widget.widgetActions"
        [fxShow]="!isEdit && action.show"
        (click)="action.onAction($event)"
        matTooltip="{{ action.name | translate }}"
        matTooltipPosition="above">
  <mat-icon>{{ action.icon }}</mat-icon>
</button>
<!--数据导出按钮实现 开始↓-->
<button mat-button mat-icon-button
        [matMenuTriggerFor]="menu"
        #menuTrigger="matMenuTrigger"
        [fxShow]="!isEdit && widget.enableDataExport"
        matTooltip="{{ 'widget.data-export' | translate }}"
        matTooltipPosition="above">
  <mat-icon>{{'archive'}}</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="exportData($event, widgetComponent.widgetContext,'csv');menuTrigger.toggleMenu();">
    <mat-icon>insert_drive_file</mat-icon>
    <span>{{ 'widget.data-export-csv' | translate }}</span>
  </button>
  <button mat-menu-item (click)="exportData($event, widgetComponent.widgetContext,'xls');menuTrigger.toggleMenu();">
    <mat-icon>insert_drive_file</mat-icon>
    <span>{{ 'widget.data-export-xls' | translate }}</span>
  </button>
  <button mat-menu-item (click)="exportData($event, widgetComponent.widgetContext,'xlsx');menuTrigger.toggleMenu();">
    <mat-icon>insert_drive_file</mat-icon>
    <span>{{ 'widget.data-export-xlsx' | translate }}</span>
  </button>
</mat-menu>
<!--数据导出按钮实现 结束↑-->
<button mat-button mat-icon-button
        [fxShow]="!isEdit && widget.enableFullscreen"
        (click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen"
        matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
        matTooltipPosition="above">
  <mat-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
</button>

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
添加注释部分代码

export class DashboardWidget implements GridsterItem, IDashboardWidget {
  dropShadow: boolean;
  enableFullscreen: boolean;
  //308行后 添加变量
  enableDataExport: boolean;
  hasTimewindow: boolean;
}
//379行后 添加默认值
this.enableDataExport = isDefined(this.widget.config.enableDataExport) ? this.widget.config.enableDataExport : true;

ui-ngx/src/app/shared/models/ace/widget-completion.models.ts
217行

enableDataExport: {
  description: 'Whether to enable data export button on widget.',
  meta: 'property',
  type: 'boolean'
},

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
添加方法

//文件开头导入依赖
import { WidgetContext } from '@home/models/widget-component.models';
exportData($event: Event, ctx: WidgetContext, fileType) {
      if ($event) {
      $event.stopPropagation();
    }
    const export_data = this.data_format(ctx.datasources, ctx.data);
    this.export(export_data, fileType, ctx.widgetConfig.title);
}

console.log(fileType);可以看出点击的哪个文件类型的导出按钮
console.log(ctx.datasources);可以看出实体enityName,实体类型enityType及数据点dataKeys

console.log(ctx.data);可以看到具体数据，格式是二维数据[[时间戳，值]，[时间戳，值]，[时间戳，值]]，还有每条数据对应的数据键

this.data_format(datasource, data);是对数据做格式转换
转化后执行console.log(export_data);结果如下

最后执行this.export(export_data, fileType, ctx.widgetConfig.title);导出数据到浏览器下载。
文件名格式小部件标题-时间戳.文件后缀

translate相关

ui-ngx/src/assets/locale/locale.constant-zh_CN.json
添加widget中的内容

"widget": {
    "data-export": "导出数据",
    "data-export-csv": "数据导出为CSV格式",
    "data-export-xls": "数据导出为XLS格式",
    "data-export-xlsx": "数据导出为XLSX格式",
}

添加widget-config中的内容

"widget-config": {
  "enable-data-export": "启用数据导出",
}

时间段选择

如果勾选了「使用仪表板的时间窗口」

则导出数据的时间段就是仪表板上的时间段内的数据

可以根据自己需求得时间段进行修改

如果没有勾选「使用仪表板的时间窗口」
那么组件上会有时间选择器

可以根据自己需求得时间段进行修改

优化

按照前面步骤做完，所有部件类型都加上了数据导出功能。实际上rpc，alarm，static是不需要的。

小部件有五种类型：timeseries，latest-values，rpc，alarm，static
但并不是每一种部件类型都需要数据导出功能。下面演示如何让rpc，static，alarm三类部件去掉数据导出功能。

rpc,static,alarm去掉图例中的启用数据导出选项

ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts

添加变量控制是否渲染启用数据导出选项
writeValue方法给isEnableDataExport赋值 ```typescript //添加变量控制是否渲染启用数据导出选项 isEnableDataExport: boolean;

writeValue(value: WidgetConfigComponentData): void { this.modelValue = value; this.removeChangeSubscriptions(); if (this.modelValue) { if (this.widgetType !== this.modelValue.widgetType) { this.widgetType = this.modelValue.widgetType; this.buildForms(); //给isEnableDataExport赋值 this.isEnableDataExport = (!(this.widgetType === widgetType.static || this.widgetType === widgetType.rpc || this.widgetType === widgetType.alarm)); } …. } }

//384行 this.widgetSettings.patchValue中之前定义的默认值改为false //是否允许数据导出设置默认值 enableDataExport: isDefined(config.enableDataExport) ? config.enableDataExport : false,

ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
1. 前面图例页面中添加的`启用数据导出`按钮上添加`*ngIf='isEnableDataExport'`
```html
<!--添加数据导出按钮↓↓↓-->
<mat-checkbox *ngIf='isEnableDataExport' formControlName="enableDataExport">
  {{ 'widget-config.enable-data-export' | translate }}
</mat-checkbox>