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);
});
}
}
|
More from my site
-
Generate PDF in Angular 2
-
How to push objects into array in Angular 2 | How to iterate objects in Angular 2 Component
-
Angular 2 Interceptors | ng2-interceptors
-
Upload file in Angular 2
-
Angular 2 Routing | How to Set Up Basic Routing in Angular 2,4,5 | Routing example in Angular 2,4,5
-
TypeScript Interfaces | Why use interfaces in angular typescript
how to get data csv, but not included the id?
how to get data csv, but not included the id?