There are 2 ways to export(download) the CSV on the web.
- Generate at the server-side and then provide a link to download
- Generate at client-side through angular
So today we will discuss the client-side through angular
Installation
We will use angular2-csv package to generate the CSV at the client-side(browser)
Please run this command at your project root
npm install --save angular2-csv Setup
Please include the below code in you app.module.ts and in the child module where you want to implement the download functionality
// file name app.module.ts import { Angular2CsvModule } from 'angular2-csv'; - Add in imports section of the app.module.ts file
imports: [ BrowserModule, AppRoutingModule, Angular2CsvModule ], - Add the download button
In your app.component.html file or your html file where you want to add the download button,
<angular2csv [data]="data" filename="test.csv" [options]="options"></angular2csv> - in your app.component.ts add this or you can replace by it
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { // option veriable options = { fieldSeparator: ',', quoteStrings: '"', decimalseparator: '.', showLabels: false, headers: [], showTitle: true, title: 'asfasf', useBom: false, removeNewLines: true, keys: ['approved','age','name' ] }; // This data will be generated in the csv file data = [ { name: "Test, 1", age: 13, average: 8.2, approved: true, description: "using 'Content here, content here' " }, { name: 'Test 2', age: 11, average: 8.2, approved: true, description: "using 'Content here, content here' " }, { name: 'Test 3', age: 10, average: 8.2, approved: true, description: "using 'Content here, content here' " } ]; } Demo
You can check the demo from Here and can get the code from the Github repo
Please give it a try and I will be happy to answer your queries on my Twitter handle Twitter
Top comments (0)