Angular JSON To Excel
1: Create json-to-excel.component.ts: You can create Excel file from your JSON data or Array of object. First install file-saver library and import it in your component.ts file. Here's an example of how the component may look like:
json-to-excel.component.ts
import { Component } from '@angular/core';
import * as FileSaver from 'file-saver';
@Component({
selector: 'app-json-to-excel',
templateUrl: './json-to-excel.component.html'
})
export class JsonToExcelComponent {
data: Array<any> = [];
fileName: string = 'Example';
constructor() { }
jsonToExcel(): void {
if(this.data.length === 0 || this.data === undefined || this.data === '' || this.data === null) {
console.log('No data found to download');
}
else {
import("xlsx").then(xlsx => {
const worksheet = xlsx.utils.json_to_sheet(this.data);
const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
this.saveAsExcelFile(excelBuffer, this.fileName);
});
console.log('Excel downloaded');
}
}
// Helper function of jsonToExcel()
saveAsExcelFile(buffer: any, fileName: string): void {
let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
let EXCEL_EXTENSION = '.xlsx';
const data: Blob = new Blob([buffer], {
type: EXCEL_TYPE
});
FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
}
}
The "saveAs" function of file-saver library plays an important role here, it take your excelBuffer created by excel pre difine functions "json_to_sheet" and convert it to Excel file for you.