ngx-ztk-csvexporter

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

Usage 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