使用angular 4在外部按钮单击上将多个数据网格导出到单个excel文件中

时间:2018-11-19 13:04:28

标签: angular devexpress devextreme devextreme-angular

我正在使用DevExtreme DxDataGridComponent。 我有两个不同的组件,分别包含DataGrid和另一个具有导出按钮的组件。 现在,我需要将那些网格的数据导出到单个excel文件中。 我尝试了许多解决方案,但没有找到可行的解决方案。我所能得到的就是您一次可以导出一个网格的数据。

下面是我要向其传递数据的excel服务。

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';


const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {

  constructor() { }

  public exportAsExcelFile(json: any[], excelFileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }

  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }

}

另一件事是我准备了一个数据对象,在那里我准备了一些数据。

data = [{
    a: something.a,
    b: something.b,
    c: something.c
}]

我所做的是listArr.push(data); 那么我所做的是:this.excelService.exportAsExcelFile(listArr,'sample');

我已经致电excel服务,现在此方法仅占用最后一行。 我的意思是说我有4行,那么它就是选择最后一行n将其打印到Excel中。这是另一个问题。

您能帮我吗

0 个答案:

没有答案