@ctrl/ngx-csv
Easily generate a CSV download in the browser with Angular
Demo: https://ngx-csv.vercel.app
Install
npm install @ctrl/ngx-csv
Dependencies
Latest version available for each version of Angular
ngx-csv | Angular |
---|
2.1.1 | 8.x |
3.0.1 | 9.x |
4.0.0 | 10.x |
5.0.0 | 12.x, 13.x |
current | >= 14.x |
Import
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: 'ah@smthing.co.com' },
{ firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
{ firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];
Array of strings
first line used as headers if not supplied
const data = [
['firstname', 'lastname', 'email'],
['Ahmed', 'Tomi', 'ah@smthing.co.com'],
['Raed', 'Labes', 'rl@smthing.co.com'],
['Yezzi', 'Min l3b', 'ymin@cocococo.com'],
];
String
An already formatted csv from an outside source
const data = `firstname,lastname
Ahmed,Tomi
Raed,Labes
Yezzi,Min l3b
`;
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: 'ah@smthing.co.com' },
{ firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
{ firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];
See Also