angularexportngx-datatable

angular 7 How to export ngx-datatable content to a excel sheet?


I have a pb with ngx-datatable and export excel. I try to use fileSaver, with angular 7. I implement a button for export and do this on it :

var blob = new Blob([document.getElementById("exportable").innerText], {
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
  //type: "application/vnd.ms-excel;charset=utf-8"
});

then saveAs(blob, "Report.xls");

"exportable" is the id of ngx-datatable :

<ngx-datatable id="exportable" #table
               class="mytable"
               [rows]="rows"
               [columns]="columns">

but I obtain a xls file white one column and all in like this :

enter image description here

do you know how to do to obtain a excel file presentation like my ngx-datatable ?

Thanks !


Solution

  • I finally found this solution, that works for me. I post here for users looking for this : my exportService :

    const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
    const EXCEL_EXTENSION = '.xlsx';
    
    @Injectable({
      providedIn: 'root'
    })
    export class ExportService {
    
      constructor( private notifService: NotifService) { }
    
      public exportAsExcelFile(rows: any[], excelFileName: string): void {
        if (rows.length > 0) {
          const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(rows);
          const workbook: XLSX.WorkBook = {Sheets: {'Compte-rendu': worksheet}, SheetNames: ['Compte-rendu']};
          const excelBuffer: any = XLSX.write(workbook, {bookType: 'xlsx', type: 'array'});
          this.saveAsExcelFile(excelBuffer, excelFileName);
        }else{
          this.notifService.message('Aucune ligne à exporter...');
        }
      }
      private saveAsExcelFile(buffer: any, baseFileName: string): void {
        const data: Blob = new Blob([buffer], {type: EXCEL_TYPE});
        FileSaver.saveAs(data, baseFileName + '_' + this.getDateFormat(new Date())  + EXCEL_EXTENSION);
      }
    
      private getDateFormat(date: Date): string {
        return formatDate(date, 'yyyyMMdd_HHmmss', 'en-US');
      }
    }
    

    Bye !