Giter VIP home page Giter VIP logo

export-data-to-csv-angular's Introduction

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() {


<span style="color: #408080; font-style: italic">//Your data for download in csv file.</span>
<span style="color: #008000; font-weight: bold">this</span>.dtHolidays <span style="color: #666666">=</span>[
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">101</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;21/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019. &quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Active&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">102</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;22/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Active&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">103</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;23/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Pending&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">104</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;24/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Active&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">105</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;25/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;NotActive&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">106</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;26/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Active&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">107</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;27/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Pending&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">108</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;28/02/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Active&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">109</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;02/03/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;NotActive&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">110</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;03/04/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Active&quot;</span>},
  {<span style="color: #BA2121">&quot;id&quot;</span><span style="color: #666666">:</span> <span style="color: #666666">111</span>, <span style="color: #BA2121">&quot;Holiday_Date&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;21/05/2019&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Comment&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;company holiday calendar of 2019.&quot;</span>, <span style="color: #BA2121">&quot;Holiday_Status&quot;</span><span style="color: #666666">:</span> <span style="color: #BA2121">&quot;Active&quot;</span>}
];  



}


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.

export-data-to-csv-angular's People

Contributors

anilsingh581 avatar

Watchers

avatar avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.