Add table csv export

src/app/components/table/table.component.html

@@ -24,6 +24,15 @@
     >
       <mat-icon class="spin">sync</mat-icon>
     </button>
+    <button
+      mat-raised-button
+      class="table-control-button"
+      matTooltip="Tabllendaten als csv downloaden."
+      (click)="downloadCSV()"
+      [disabled]="reloadingTable || !isLoaded || !data.data"
+    >
+      <mat-icon class="spin">cloud_download</mat-icon>
+    </button>
     <button
       mat-raised-button
       class="table-control-button"

src/app/components/table/table.component.ts

@@ -24,6 +24,7 @@ import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/internal/operators/debounceTime';
 import { SelectObjectDialogComponent } from '../select-object-dialog/select-object-dialog.component';
 import { filter } from 'rxjs/operators';
+import { DownloadService } from 'src/app/services/download.service';
 
 @Component({
   selector: 'app-table',
@@ -110,7 +111,8 @@ export class TableComponent implements AfterViewInit {
     private schemaService: SchemaService,
     public dialog: MatDialog,
     private activatedroute: ActivatedRoute,
-    private cdRef: ChangeDetectorRef
+    private cdRef: ChangeDetectorRef,
+    private downloadServive: DownloadService
   ) {}
 
   ngOnInit() {
@@ -433,6 +435,10 @@ export class TableComponent implements AfterViewInit {
     return this.data.data.find((row) => row.id === id);
   }
 
+  downloadCSV() {
+    this.downloadServive.saveTableDataAsCSV(this.data.data, this.columnInfo, this.headline);
+  }
+
   drop(event: CdkDragDrop<string[]>) {
     moveItemInArray(
       this.displayedColumns,

src/app/services/download.service.ts

@@ -1,32 +1,63 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import * as FileSaver from 'file-saver';
 
-const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_TYPE =
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
 const JSON_TYPE = 'data:text/json;charset=UTF-8';
+const CSV_TYPE = 'text/csv;charset=utf-8';
 
 const EXCEL_EXTENSION = '.xlsx';
 const JSON_EXTENSION = '.json';
+const CSV_EXTENSION = '.csv';
 
-
+@Injectable({ providedIn: 'root' })
-@Injectable({ providedIn: "root" })
 export class DownloadService {
-  csvChar: string = ";";
+  csvChar: string = ';';
 
+  public saveTableDataAsCSV(tableData: any, columnInfo: any, fileName: string) {
+    const csvData = [];
+    const header = columnInfo
+      .map((column) => column.translation)
+      .join(this.csvChar);
+    csvData.push(header);
+    for (const row of tableData) {
+      const newRow = columnInfo.map((column) => {
+        let cellData = row[column.dataPath];
+        if (Array.isArray(cellData)) {
+          cellData = cellData.join(', ');
+        } else if (column.type === 'NumRange') {
+          cellData = (row[column.dataPath + ".min"] || '') + " bis " + (row[column.dataPath + ".max"] || ''); 
+        } else if (column.type === 'DateRange') {
+          cellData = (row[column.dataPath + ".from"] || '') + " bis " + (row[column.dataPath + ".to"] || ''); 
+        }
+        return JSON.stringify(cellData || '');
+      });
+      csvData.push(newRow.join(this.csvChar));
+    }
+    const BOM = '\uFEFF';
+    const csv = BOM + csvData.join('\r\n');
+    const blob = new Blob([csv], { type: CSV_TYPE });
+    FileSaver.saveAs(
+      blob,
+      fileName + '_export_' + new Date().toLocaleString() + CSV_EXTENSION
+    );
+  }
 
-  /*public exportAsExcelFile(json: any[], excelFileName: string, sheetName: string): void {  
-    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);  
-    const workbook: XLSX.WorkBook = { Sheets: { [sheetName] : worksheet }, SheetNames: [sheetName] };  
-    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
-    this.saveAsExcelFile(excelBuffer, excelFileName);
-  }*/ 
-  
   private saveAsExcelFile(buffer: any, fileName: string): void {
-    const data: Blob = new Blob([buffer], {type: EXCEL_TYPE});   
+    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
-    FileSaver.saveAs(data, fileName + '_export_' + new  Date().getTime() + EXCEL_EXTENSION);
+    FileSaver.saveAs(
+      data,
+      fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION
+    );
   }
 
-  public exportJSONFile(json: any, fileName: string){
+  public exportJSONFile(json: any, fileName: string) {
-    const data: Blob = new Blob([JSON.stringify(json, null, 2)], {type: JSON_TYPE});   
+    const data: Blob = new Blob([JSON.stringify(json, null, 2)], {
-    FileSaver.saveAs(data, fileName + '_export_' + new  Date().getTime() + JSON_EXTENSION);
+      type: JSON_TYPE,
+    });
+    FileSaver.saveAs(
+      data,
+      fileName + '_export_' + new Date().getTime() + JSON_EXTENSION
+    );
   }
 }