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.
angular devexpress devextreme devextreme-angular
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
add a comment |
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.
angular devexpress devextreme devextreme-angular
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
So theexportAsExcelFilemethod takes ajsonarray and writes that into the excel file. Could you not just merge both of your datasets usingconcat, then pass that array to yourexportAsExcelFilemethod?
– 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 |
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.
angular devexpress devextreme devextreme-angular
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
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.
angular devexpress devextreme devextreme-angular
angular devexpress devextreme devextreme-angular
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
asked Nov 19 '18 at 13:04
Vaibhav GadgeVaibhav Gadge
13
13
So theexportAsExcelFilemethod takes ajsonarray and writes that into the excel file. Could you not just merge both of your datasets usingconcat, then pass that array to yourexportAsExcelFilemethod?
– 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 theexportAsExcelFilemethod takes ajsonarray and writes that into the excel file. Could you not just merge both of your datasets usingconcat, then pass that array to yourexportAsExcelFilemethod?
– 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
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
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
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
So the
exportAsExcelFilemethod takes ajsonarray and writes that into the excel file. Could you not just merge both of your datasets usingconcat, then pass that array to yourexportAsExcelFilemethod?– 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