https://github.com/anilsingh581/export-data-to-csv-angular

export data to csv angular
https://github.com/anilsingh581/export-data-to-csv-angular

Last synced: about 2 months ago
JSON representation

export data to csv angular

• Host: GitHub
• URL: https://github.com/anilsingh581/export-data-to-csv-angular
• Owner: anilsingh581
• Created: 2019-12-14T07:35:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-14T07:45:42.000Z (over 5 years ago)
• Last Synced: 2024-01-29T18:29:32.774Z (over 1 year ago)
• Language: TypeScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Export-data-to-csv-Angular

export data to csv angular

# Installation

npm install --save angular7-csv

# Example



 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

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);

  }

}





# Angular7Csv (data, filename, options) – The options contains the following properties.

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

# You should check out the docs.