6

Export to CSV or Excel Files in Angular 5 , 6 and 7

In this article, I am sharing a common feature of angular and no-angular projects i.e.
1.      Export to excel
2.      Export to csv

Stayed Informed - Export to CSV in Angular 7

Most of all applications have the requirements for export to CSV or Excel files.
Now come to the point, How to Export to Excel or CSVfile in Angular 5?
In Angular 5, first will need to install the “angular5-csv” using the below NPM commands -

Installation -
npm install --save angular5-csv


And after that we will need to import the below reference i.e.

Import
import { Angular5Csv } from 'angular5-csv/Angular5-csv';


These Angular5Csv export method contains the three parameters –
1.      Data
2.      Filename
3.      Options

It looks like –
Angular5Csv(data, filename, options)


Angular5Csv (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 see the options example -
var options = {
  fieldSeparator: ',',
  quoteStrings: '"',
  decimalseparator: '.',
  showLabels: true,
  showTitle: true,
  useBom: true,
  noDownload: true,
  headers: ["FirstName", "LastName", "UserID"]
};

Angular5Csv(data, filename, options);


Let’s explore in detail in the below example -
import { Angular5Csv } from 'angular5-csv/Angular5-csv';

var data = [
  {
    name: "Anil Singh",
    age: 33,
    average: 98,
    approved: true,
    description: "I am active blogger and Author."
  },
  {
    name: 'Reena Singh',
    age: 28,
    average: 99,
    approved: true,
    description: "I am active HR."
  },
  {
    name: 'Aradhya',
    age: 4,
    average: 99,
    approved: true,
    description: "I am engle."
  },
];

 var options = {
    fieldSeparator: ',',
    quoteStrings: '"',
    decimalseparator: '.',
    showLabels: true,
    showTitle: true,
    useBom: true,
    noDownload: true,
    headers: ["FirstName", "LastName", "UserID"]
  };

new Angular5Csv(data, 'MyFileName');


Explore this reference URL - https://www.npmjs.com/package/angular5-csv

I hope you enjoyed this post. Thank you very much for reading this article.
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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

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