export multiple data grid into single excel file on a external button click using angular 4

Question

I am using DevExtreme DxDataGridComponent. I have two different components contains DataGrid and another component where I have export button. Now I need to export the data of those grid into single excel file. I have tried many solutions but did not find feasible solution. All I got is you can export a data of one grid at a time.

Below is my excel service to which I was passing data.

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

}

Another thing is I have prepared one data object where I have prepared some data.

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

and what i did is, listArr.push(data); then what I did is: this.excelService.exportAsExcelFile(listArr, 'sample');

I have given a call to excel service, now this method is just taking the last row. What do I mean by that is lets say I have 4 rows then it is just picking up the last row n printing it into the excel. this is the another issue.

Could you please help me in this.