Skip to main content

Export to CSV in Angular Example - Angular 9, 8, 7

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 -
Labels: