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