I have a data table that is dynamically populated using Angular 4. I would like to export the table to excel. How can I achieve this in Angular 4. I\'m looking for .xls and not
before install libary
npm i file-saver
npm i xlsx
Create service excel with name class ExcelService ng g s excel/ExcelService you can coppy below code
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({
providedIn: 'root'
})
export class ExcelServiceService {
constructor() { }
public exportAsExcelFile(json: any[], excelFileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
console.log('worksheet',worksheet);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
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);
}
}
Create folder model in have class CountryInfo
export class CountryInfo {
country: string;
hydro: number;
oil: number;
gas: number;
coal: number;
nuclear: number;
}
you can clone example export a file excel in angular at github
You can use XLSX for export to excel.
It will support json or array into excel.
Sample code
import * as XLSX from 'xlsx';
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);
}
For Save
private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], {
type: EXCEL_TYPE
});
const today = new Date();
const date = today.getFullYear() + '' + (today.getMonth() + 1) + '' + today.getDate() + '_';
const time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
const name = fileName + date + time;
FileSaver.saveAs(data, name + EXCEL_EXTENSION);
}
Reference for Angular 2+
Xlsx for angular 2+
For those who are still looking for a working answer.
public export() {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.myDataModels);
/* generate workbook and add the worksheet */
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
/* save to file */
XLSX.writeFile(wb, this.createFileName());
}
This will save as an xlsx file automatically Got this from https://github.com/SheetJS/js-xlsx/tree/19620da30be2a7d7b9801938a0b9b1fd3c4c4b00/demos/angular2
It seems that microsoft provide a Javascript plugin, usable with Angular, here
You can only use xlsx
library to write and save excel file at the same time using XLSX.writeFile()
exportExcel(data: any[]){
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
XLSX.writeFile(workbook, 'my_file.xls', { bookType: 'xls', type: 'buffer' });
}