Angular 4 : Export JSON to CSV

Question

I need some help to export a JSON to CSV in Angular 4.

Is there any ready made external plugin to serve my requirement.

I have found one plugin json2csv. But I have no idea how to use it in Angular 4.

are you using angular cli ? take a look at the documentation https://github.com/angular/angular-cli/wiki/stories-third-party-lib — JEY, Sep 21 '17 at 10:45
Can you share your code where you have tried the above plugin? If you haven't are you asking how to import ? because here is a documentation for the same. https://www.npmjs.com/package/json2csv — Clive Machado, Sep 22 '17 at 12:18
@Suvonkar if that is the case then, I believe "nikhilbaby" has provided the correct answer below. — Clive Machado, Sep 25 '17 at 12:04

score 9 · Answer 1 · answered Sep 21 '17 at 12:24

9

You can use the angular 2 version of the library. The link to the same is: https://github.com/aqeel-legalinc/angular2-json2csv

Basic Usage:

Data is the JSON object that has to be converted to CSV. Filename is the name of the output file. The steps included are:

Install the library

npm install angular2-json2csv --save

Import the package in the component

import {CsvService} from 'angular2-json2csv'

Add the service in the constructor of the component

constructor(private csvService: CsvService) {
  }

Call the service

this.csvService.download(this.Data, 'Filename');

answered Sep 21 '17 at 12:24

Nikhil Baby

863
3
10
22

Are you using Angular 5?. This doesn't seem to work with Angular 5. There is an open issue for the same in: https://github.com/aqeel-legalinc/angular2-json2csv/issues/11 – Nikhil Baby Mar 06 '18 at 11:05
1

You should try the solution provided by @Diego. I believe that works. – Nikhil Baby Mar 06 '18 at 11:21

Diego Venâncio · Answer 2 · 2018-11-16T19:47:15.560

4

npm install --save angular2-csv

For Angular [ 2,4,5 ] install old version:

npm install --save angular2-csv@0.2.5

In component.ts

import { Angular2Csv } from 'angular2-csv/Angular2-csv';

var data = [
  {
    name: "Test 1",
    age: 13,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
];

new Angular2Csv(data, 'My Report');

For set headers try it =>

var head = ['name', 'age', 'average', 'etc']; 
new Angular2Csv(data, 'My Report', { headers: (head) });

Source

edited Nov 16 '18 at 19:47

answered Feb 26 '18 at 02:36

Diego Venâncio

5,698
2
49
68

This does not work anymore too. The library recently updated so just refer to the guide on Github. – Juni Brosas Aug 10 '18 at 03:33
@JuniBrosas npm install --save angular2-csv For Angular [ 2,4,5 ] install old version: npm install --save angular2-csv@0.2.5 – Diego Venâncio Aug 10 '18 at 12:31
1

It generates csv file without headers (column names). Any idea? – Ankur Akvaliya Nov 16 '18 at 13:07
@AnkurAkvaliya set header this mode => const myArrStr = JSON.stringify(this.someArray); var head = ['header 1', 'header 2', 'header 3']; new Angular2Csv(myArrStr, 'report_name', { headers: (head) }); – Diego Venâncio Nov 16 '18 at 19:42

score 2 · Answer 3 · answered Apr 02 '19 at 05:56

npm install  "angular2-csv": "^0.2.5",

import { Angular2Csv } from 'angular2-csv';

const sample_CSV_data = {
        "column1": "Column 1",  
        "type": "Type",
        "Board": "Board",
        "column4": "Column 4"        
}; 
const options = {
      fieldSeparator: ',',
      quoteStrings: '"',
      decimalseparator: '.',
      showLabels: true
    };
    const csv = new Angular2Csv(sample_CSV_data, 'Sample_filename', options);

This Works fine, very helpful tool.

how about nested objects? Example {"column4": "Column 4", "city": { "id": 125, "name": "SomeCity" } ... Is posible to show the name of the city?? — matQ, Apr 03 '19 at 05:48

Angular 4 : Export JSON to CSV

3 Answers3