Skip to content

Instantly share code, notes, and snippets.

@viruskizz
Last active April 20, 2022 15:52
Show Gist options
  • Save viruskizz/c941ecf905393583ed2227121c08837f to your computer and use it in GitHub Desktop.
Save viruskizz/c941ecf905393583ed2227121c08837f to your computer and use it in GitHub Desktop.
Angular export JSON to xlsx or any type
/**
* xlxs and file-saver example
* https://dev.to/idrisrampurawala/exporting-data-to-excel-and-csv-in-angular-3643
* https://github.com/SheetJS/sheetjs
* install library
* npm install --save xlsx file-saver
* npm i --save-dev @types/file-saver
*/
import { Component, OnInit } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
interface Profile {
firstname: string;
lastname: string;
}
@Component({
selector: 'app-test',
template: `
<div class="container">
<h2>XLSX Example</h2>
<button (click)="download('xlsx')">Download XLSX</button>
<button (click)="download('csv')">Download CSV</button>
<button (click)="download('any')">Download ANY</button>
<pre>{{getDataString()}}</pre>
</div>
`,
styles: [
`
.container {
margin: 20px 20px;
}
h2 {
color: navy;
font-size: 20px;
font-weight: bold;
}
button {
margin: 5px 5px;
padding: 10px 20px 10px 20px;
background-color: #24788F;
border-radius: 5px;
color: white;
}
`
]
})
export class TestComponent implements OnInit {
data: Profile[] = [
{
firstname: 'Araiva',
lastname: 'viruskizz',
}
];
sheetName = 'Data';
filename = 'example';
constructor() { }
ngOnInit(): void {
}
download(type: string): void {
const worksheet = XLSX.utils.json_to_sheet(this.data, {});
if (type === 'xlsx') {
this.exportXlsx(worksheet);
} else if (type === 'csv') {
this.exportCsv(worksheet);
} else {
this.exportToAny(worksheet, 'csv');
}
}
exportXlsx(worksheet: XLSX.WorkSheet): void {
const fileExtension = '.xlsx';
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, this.sheetName);
// Automatic download with file-saver
XLSX.writeFile(workbook, `${this.filename}${fileExtension}`);
}
exportToAny(worksheet: XLSX.WorkSheet, type: XLSX.BookType): void {
const fileExtension = '.xlsx';
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, this.sheetName);
// Automatic download with file-saver
XLSX.writeFile(workbook, `${this.filename}.${type}`, {
bookType: type
});
}
exportCsv(worksheet: XLSX.WorkSheet): void {
const fileExtension = '.csv';
const csv = XLSX.utils.sheet_to_csv(worksheet, {FS: ';'});
const blob = new Blob([csv], {type: 'text/plain;charset=UTF-8'});
FileSaver.saveAs(blob, `${this.filename}${fileExtension}`);
}
getDataString(): string {
return JSON.stringify(this.data, null, 2);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment