Sometime we need to export data in CSV. Here I'm going to explain how can we export the data to CSV in Angular 2 along with headers.
Data which will be exported will be received form web service on and click event.
First of all you need to install angular2-csv library by following below command.
Install:
|
1 |
npm install --save angular2-csv |
Html:
|
1 |
<button (click)="download()">download </button> |
Component:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import { Component, OnInit } from '@angular/core'; import { Angular2Csv } from 'angular2-csv/Angular2-csv'; import { UserService } from '../_services/index'; @Component({ selector: 'app-csv', templateUrl: './csv.component.html', styleUrls: ['./csv.component.css'] }) export class CsvComponent implements OnInit { private allItems: {}; constructor(private userService: UserService) { } ngOnInit() { } download() { this.userService.getAll() .subscribe(data => { //API data this.allItems = data.result.users; /*var dummyData = [ { first_name: "Saurabh", last_name: "Sharma", id: 147 }, { first_name: "Gaurav", last_name: "Sharma", id: 9 }]; */ var options = { fieldSeparator: ',', quoteStrings: '"', decimalseparator: '.', showLabels: true, showTitle: true, headers: ['First Name','Last Name','ID'] }; new Angular2Csv(this.allItems, 'My Report',options); //new Angular2Csv(dummyData, 'My Report',options); }); } } |
...
