@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
`;

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: 'ah@smthing.co.com' },
  { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
  { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];

See Also

• react-csv