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 -
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
