Hello Guys, I’m sharing an example for “Export to CSV in Angular” with source
code. I hope this code sample will helps you to create and download CSV file in
Angular 7+.
Angular7Csv (data, filename, options) – The options
contains the following properties i.e.
1. ieldSeparator
– It is a field separator character.
2. quoteStrings
– It is double quotes by default. If provided, will use these characters to
"escape" fields.
3. decimalseparator
– It is (.) decimal separator by default. If set to "locale", it uses
the language sensitive representation of the number.
4. showLabels
– It is false by default. If provided, would use this attribute to create a
header row.
5. showTitle
- It is false by default.
6. useBom
- It is true by default. If true, adds a BOM character at the start of the CSV
7. noDownload
- It is false by default. If true, disables automatic download and returns only
formatted CSV.
Stayed
Informed - Angular7 data-tables Example with sorting, paging and filter
Let’s start the steps.
Steps
1: Installation - Firstly we will need to install the below npm
command in your project.
npm i angular7-csv
Steps
2: Import AngularCsv - Import AngularCsv
in your component file where you want to add your download button to export your
csv file.
import { AngularCsv } from 'angular7-csv/dist/Angular-csv'
Example
in detail: - Components file looks like below code –
import { Component, OnInit } from '@angular/core';
import { AngularCsv } from 'angular7-csv/dist/Angular-csv'
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
constructor() { }
dtHolidays :any;
csvOptions = {
fieldSeparator: ',',
quoteStrings: '"',
decimalseparator: '.',
showLabels: true,
showTitle: true,
title: 'Your Holiday List :',
useBom: true,
noDownload: false,
headers: ["Holiday ID", "Holiday Date", "Holiday
Comment", "Holiday Status"]
};
ngOnInit() {
//Your data for download in csv file.
this.dtHolidays =[
{"id": 101, "Holiday_Date": "21/02/2019", "Holiday_Comment": "company holiday calendar of 2019. ", "Holiday_Status": "Active"},
{"id": 102, "Holiday_Date": "22/02/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Active"},
{"id": 103, "Holiday_Date": "23/02/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Pending"},
{"id": 104, "Holiday_Date": "24/02/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Active"},
{"id": 105, "Holiday_Date": "25/02/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "NotActive"},
{"id": 106, "Holiday_Date": "26/02/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Active"},
{"id": 107, "Holiday_Date": "27/02/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Pending"},
{"id": 108, "Holiday_Date": "28/02/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Active"},
{"id": 109, "Holiday_Date": "02/03/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "NotActive"},
{"id": 110, "Holiday_Date": "03/04/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Active"},
{"id": 111, "Holiday_Date": "21/05/2019", "Holiday_Comment": "company holiday calendar of 2019.", "Holiday_Status": "Active"}
];
}
downloadCSV(){
//this.dtHolidays : JSONDATA , HolidayList : CSV file Name,
this.csvOptions : file options
new AngularCsv(this.dtHolidays, "HolidayList", this.csvOptions);
}
}
And
<button (click)="downloadCSV()" class="btn-default">Download CSV</button>
An option looks like this.
filename: string;
fieldSeparator: string; //Defines the field separator character
quoteStrings: string;//If provided, will use this characters to "escape"
fields, otherwise will use double quotes as deafult
decimalseparator: string;//Defines the decimal separator character (default is .)
showLabels: boolean;//If provided, would use this attribute to create a header row
showTitle: boolean;
title: string;
useBom: boolean;//If true, adds a BOM
character at the start of the CSV
headers: string[];
noDownload: boolean; //If true, disables
automatic download and returns only formatted CSV
CsvConfigConsts looks like this.
static EOL: string;
static BOM: string;
static DEFAULT_FIELD_SEPARATOR: string;
static DEFAULT_DECIMAL_SEPARATOR: string;
static DEFAULT_QUOTE: string;
static DEFAULT_SHOW_TITLE: boolean;
static DEFAULT_TITLE: string;
static DEFAULT_FILENAME: string;
static DEFAULT_SHOW_LABELS: boolean;
static DEFAULT_USE_BOM: boolean;
static DEFAULT_HEADER: any[];
static DEFAULT_NO_DOWNLOAD: boolean;
AngularCsv class looks like this.
{
fileName: string;
labels: Array<String>;
data: any[];
private _options;
private csv;
constructor(DataJSON: any, filename: string, options?: any);
/**
* Generate and Download Csv
*/
private generateCsv;
/**
* Create Headers
*/
getHeaders(): void;
/**
* Create Body
*/
getBody(): void;
/**
* Format Data
* @param {any} data
*/
formartData(data: any): any;
/**
* Check if is Float
* @param {any} input
*/
static isFloat(input: any): boolean;
}
Download source code for - Export to CSV in Angular 7
Stayed
Informed - Angular 7 data-ables Example with sorting, paging and filter
Result Looks like -
