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

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.

asked Nov 19 '18 at 13:04

Vaibhav Gadge

So the exportAsExcelFile method takes a json array and writes that into the excel file. Could you not just merge both of your datasets using concat, then pass that array to your exportAsExcelFile method?

– Viqas
Nov 19 '18 at 16:08

I am passing the array only to the exportAsExcelFile(listArr) like this but in end lets say you have 4 rows then it just writes the last 4th row into the excel.

– Vaibhav Gadge
Nov 20 '18 at 7:44

Hmmm, not sure what's happening then. Take a look at this working SlackBlitz, Fork it and edit it to reproduce your issue.

– Viqas
Nov 20 '18 at 8:02

add a comment |

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

Could you please help me in this.

asked Nov 19 '18 at 13:04

Vaibhav Gadge

So the exportAsExcelFile method takes a json array and writes that into the excel file. Could you not just merge both of your datasets using concat, then pass that array to your exportAsExcelFile method?

– Viqas
Nov 19 '18 at 16:08

I am passing the array only to the exportAsExcelFile(listArr) like this but in end lets say you have 4 rows then it just writes the last 4th row into the excel.

– Vaibhav Gadge
Nov 20 '18 at 7:44

Hmmm, not sure what's happening then. Take a look at this working SlackBlitz, Fork it and edit it to reproduce your issue.

– Viqas
Nov 20 '18 at 8:02

add a comment |

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

Could you please help me in this.

asked Nov 19 '18 at 13:04

Vaibhav Gadge

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

Could you please help me in this.

angular devexpress devextreme devextreme-angular

asked Nov 19 '18 at 13:04

Vaibhav Gadge

asked Nov 19 '18 at 13:04

Vaibhav Gadge

asked Nov 19 '18 at 13:04

Vaibhav Gadge

asked Nov 19 '18 at 13:04

Vaibhav Gadge

asked Nov 19 '18 at 13:04

Vaibhav Gadge

So the exportAsExcelFile method takes a json array and writes that into the excel file. Could you not just merge both of your datasets using concat, then pass that array to your exportAsExcelFile method?

– Viqas
Nov 19 '18 at 16:08

I am passing the array only to the exportAsExcelFile(listArr) like this but in end lets say you have 4 rows then it just writes the last 4th row into the excel.

– Vaibhav Gadge
Nov 20 '18 at 7:44

Hmmm, not sure what's happening then. Take a look at this working SlackBlitz, Fork it and edit it to reproduce your issue.

– Viqas
Nov 20 '18 at 8:02

add a comment |

So the exportAsExcelFile method takes a json array and writes that into the excel file. Could you not just merge both of your datasets using concat, then pass that array to your exportAsExcelFile method?

– Viqas
Nov 19 '18 at 16:08

I am passing the array only to the exportAsExcelFile(listArr) like this but in end lets say you have 4 rows then it just writes the last 4th row into the excel.

– Vaibhav Gadge
Nov 20 '18 at 7:44

Hmmm, not sure what's happening then. Take a look at this working SlackBlitz, Fork it and edit it to reproduce your issue.

– Viqas
Nov 20 '18 at 8:02

So the exportAsExcelFile method takes a json array and writes that into the excel file. Could you not just merge both of your datasets using concat, then pass that array to your exportAsExcelFile method?

– Viqas
Nov 19 '18 at 16:08

I am passing the array only to the exportAsExcelFile(listArr) like this but in end lets say you have 4 rows then it just writes the last 4th row into the excel.

– Vaibhav Gadge
Nov 20 '18 at 7:44

Hmmm, not sure what's happening then. Take a look at this working SlackBlitz, Fork it and edit it to reproduce your issue.

– Viqas
Nov 20 '18 at 8:02

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375288%2fexport-multiple-data-grid-into-single-excel-file-on-a-external-button-click-usin%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky