1.0.3 • Published 6 years ago
ngx-ztk-csvexporter v1.0.3
Export CSV in Angular
Generate CSV files with single line of code!
Prerequisites
The library created in Angular 6. To avoid any unwanted behaviour it's recommended to install it to Angular 6 projects.
Installation
npm install ngx-ztk-csvexporter --saveUsage example
import { Component, OnInit } from '@angular/core';
// 1. IMPORT PACKAGE
import { NgxZtkCSVExporter, NgxZtkCSVConfigProps } from 'ngx-ztk-csvexporter';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
// 2. ADD TO THE CONSTRUCTOR
constructor(private exporter: NgxZtkCSVExporter) {}
ngOnInit(): void {}
// 3. CALL DECLARED SERVICE IN A FUNCTION - OPTIONAL: SET CONFIGURATION SETTINGS IN EXTERNAL OBJECT
exportFile() {
// You can find more configuration options in the documentation below.
let confg: NgxZtkCSVConfigProps = { fieldSeperator: ';', autoDownload:false };
let csvText = this.exporter.GenerateCSV({ a: { b: 10, c: 11 }, b: ['one', 'two'] }, confg);
}
}Export Configurations
| Property | Default value | Description |
|---|---|---|
| filename | sheet1 | Recommended to set this property when filenameDialog is set to false |
| showFilenameDialog | true | Open a prompt dialog window to set CSV filename. Set to false can cause unwanted behaviour. Default filename or manually set filename will be used. |
| fieldSeperator | , | Field seperator character |
| decimalPoint | . | Decimal number seperator character. Set to ,,locale'' it tells client's system to use it's default seperator. |
| keepLeadingSpace | false | Kept leading spaces can cause unwanted changes. Field will set to be String in Excel to preserve leading or trailing spaces. |
| keepLeadingZeros | false | Kept leading zeros can cause unwanted changes. Field will set to be String in Excel to preserve zeros. |
| containsHeader | false | Set to true can cause unwanted behaviour. First row set to be the exported file header. |
| customHeader | [] | Pass a custom string array of header names |
| insertBom | true | Add a BOM charachter to the beginning of the CSV. Set to false can cause unwanted behaviour. Latin extended charachters may not be displayed. |
| localeDateFormat | true | Objects with Date type set to localeDateString. Set to false can cause unwanted changes. Field will set to American English date string. |
| boolToYesNo | false | Set to true can cause unwanted changes. Field will set Yes or No based on boolean value. |
| autoDownload | true | Set to false can cause unwanted changes. The function returns a CSV formatted string. |
Allowed data formats
// Array with objects
let data1 = [
{
a_a: 10,
a_b: 'one'
},
{
b_a: 5,
b_b: 'eleven'
}
];
//Object with objects
let data2 = {
a: {
a_a: 10,
a_b: 'one'
},
b: {
b_a: 5,
b_b: 'eleven'
}
};
// Mixed
let data3 = [
{
a_a: 10,
a_b: 'one'
},
[5, 'eleven']
];
// Single types allowed too
let data4 = 'one';
let data5 = [
{
a_a: 10,
a_b: 'one'
},
'eleven',
10,
['two', 7]
];
// ONLY TWO DIMENSION WILL BE HANDLED, DEEPER PLACED OBJECTS RETURN UNDEFINED VALUE