angular 7 如何将ngx-datatable 内容导出到excel sheet？

Question

我有一个带有 ngx-datatable 和导出的 pb excel。我尝试使用 fileSaver，angular 7。我实现了一个导出按钮并在其上执行此操作：

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"
});

然后 saveAs(blob, "Report.xls");

"exportable"是ngx-datatable的id:

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

但是我得到了一个只有一列的 xls 文件，所有内容都是这样的：

你知道如何获得像我的 ngx-datatable 这样的 excel 文件展示吗？

谢谢！

Answer 1

我终于找到了适合我的解决方案。我 post 在这里为寻找这个的用户：我的出口服务：

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');
  }
}

再见！

Answer 2

我有一个更好的实用解决方案。也适用于 ANGULAR 10+

In most of the cases, the data is coming from API.

所以，如果我们直接将数据转换为 CSV，那就太好了。是的，有可能...

第 1 步：npm install @ctrl/ngx-csv

第 2 步：module.ts

@NgModule({
 declarations: [
  ...
  ...
  ...
 ],
 imports: [
   ...
   CsvModule,
   ...
 ]
})

第 3 步：component.html

<a csvLink [data]="yourDataObject">CSV</a>

希望此解决方案对您有所帮助:)

Answer 3

这对我来说非常有效。我有一个对象将数据提供给名为 'temp' 的 Ngx-Datatable，并引用该对象，以便当前显示在数据表中的任何项目（如果应用或不应用过滤器）然后导出到 excel。

安装 XLSX 包npm i xlsx --save

Component.ts

  exportexcel(): void
  {
    /* pass here the data source */
    
    const ws: XLSX.WorkSheet =XLSX.utils.json_to_sheet(this.temp);
 
    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
    /* save to file */  
    XLSX.writeFile(wb, 'FileName.xlsx');
 
  }

    <button (click)="exportexcel()">Export to Excel</button>

angular 7 如何将ngx-datatable 内容导出到excel sheet？

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

export

ngx-datatable

angular