@ctrl/ngx-csv
Easily generate a CSV download in the browser with Angular
Demo: https://ngx-csv.vercel.app
Install
npm install @ctrl/ngx-csvDependencies
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: '[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]' },
];