Angular 7

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.


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


Result Looks like -
ANIL SINGH

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^