python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
6

Export to Excel or CSV Files in Angular 5

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

Most of all applications have the requirements for export to CSV or Excel files.
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions