Showing posts with label ngCsv. Show all posts
Showing posts with label ngCsv. Show all posts
ngCsv - Export to CSV using AngularJS

ngCsv - Export to CSV using AngularJS

May 16, 2017

Simple directive that turns arrays and objects into downloadable CSV files


  • angular.js (of course!), any version starting with 1
  • angular-sanitize.js, any version starting with 1

How to get it ?

Manual Download

Download the from here


 bower install ng-csv  


 npm install ng-csv  


ng-csv is available at cdnjs


  1. Add ng-csv.min.js to your main file (index.html). please also make sure you're adding angular-sanitize.min.js.
  2. Set ngCsv as a dependency in your module
  3.  var myapp = angular.module('myapp', ['ngSanitize', 'ngCsv'])  
  4. Add ng-csv directive to the wanted element, example:
  5.  <button type="button" ng-csv="getArray" filename="test.csv">Export</button>  

ngCsv attributes

  • ng-csv : The data array - Could be an expression, a value or a promise.
  • filename : The filename that will be stored on the user's computer
  • csv-header : If provided, would use this attribute to create a header row
  •  <button type="button" ng-csv="getArray" csv-header="['Field A', 'Field B', 'Field C']" filename="test.csv">Export</button>  
  • csv-column-order : Defines the column order to be set when creating the body of the CSV (may be according to the csv-headers) - use it when you have an array of objects.
  • field-separator : Defines the field separator character (default is ,)
  • decimal-separator : Defines the decimal separator character (default is .). If set to "locale", it uses the language sensitive representation of the number.
  • text-delimiter : If provided, will use this characters to "escape" fields, otherwise will use double quotes as deafult
  • quote-strings : If provided, will force escaping of every string field.
  • lazy-load : If defined and set to true, ngCsv will generate the data string only on demand. See the lazy_load example for more details.
  • add-bom : Add the Byte Order Mark, use this option if you are getting an unexpected char when opening the file on any windows App.
  • charset : Defines the charset of the downloadable Csv file. Default is "utf-8".
  • csv-label : Defines whether or not using keys as csv column value (default is false).


Note: Special thanks to Asaf David

Disclaimer: The blog is created to share angular directives information to geek angular developers.