Last active
April 20, 2022 15:52
-
-
Save viruskizz/c941ecf905393583ed2227121c08837f to your computer and use it in GitHub Desktop.
Angular export JSON to xlsx or any type
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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