ngx-csv
Easily generate a CSV download in the browser with Angular
Demo: https://ngx-csv.netlify.com/
Install
npm install @ctrl/ngx-csvImport
import { CsvModule } from '@ctrl/ngx-csv';Use
Add the csvLink directive to your <a> tag
<a csvLink [data]="data">Download</a>Input
- data: The body of the csv
- headers: Set the first line of the csv
- delimiter: Set the seperator between values. Default
',' - filename: Set the filename of the csv. Default
data.csv - uFEFF: Adds a Byte order mark to setup the csv as UTF-8. Default
true - target: Element target. Default `_blank
Accepted Data Formats
Array of objects
keys are used as the column headers
const data = [ { firstname: 'Ahmed', lastname: 'Tomi', email: '[email protected]' }, { firstname: 'Raed', lastname: 'Labes', email: '[email protected]' }, { firstname: 'Yezzi', lastname: 'Min l3b', email: '[email protected]' }, ];Array of strings
first line used as headers if not supplied
const data = [ ['firstname', 'lastname', 'email'], ['Ahmed', 'Tomi', '[email protected]'], ['Raed', 'Labes', '[email protected]'], ['Yezzi', 'Min l3b', '[email protected]'], ];String
An already formatted csv from an outside source
const data = `firstname,lastname Ahmed,Tomi Raed,Labes Yezzi,Min l3b `;Array of objects with custom headers
provided headers
const headers = [ { label: 'First Name', key: 'firstname' }, { label: 'Last Name', key: 'lastname' }, { label: 'Email', key: 'email' }, ]; const data = [ { firstname: 'Ahmed', lastname: 'Tomi', email: '[email protected]' }, { firstname: 'Raed', lastname: 'Labes', email: '[email protected]' }, { firstname: 'Yezzi', lastname: 'Min l3b', email: '[email protected]' }, ];
