Json to CSV using ng-csv

ng-csv.png

ng-csv is the simple directive that converts arrays and objects to CSV files.

Steps:

1. Add ng-csv.min.js  and angular-sanitize.min.js
    cdn for these are :


2. add 'ngSanitize', 'ngCsv' dependecies to your module
3. use ng-csv directive in html

Lets see a sample application

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--angular js-->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

        <!--ngcsv CDN-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.6/ng-csv.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.js"></script>

        <script>
            angular.module('app', ['ngSanitize', 'ngCsv']).controller('downloader', function($scope) {
                // json data to be exported
                $scope.data = [
                    {
                        "id": "1",
                        "name": "avis"
                    },
                    {
                        "id": "2",
                        "name": "tasis"
                    },
                    {
                        "id": "3",
                        "name": "ticus"

                    }
                ]
            });
        </script>
    </head>
    <body ng-app="app" ng-controller="downloader">
<table border="1px">
<th>Id</th>
<th>Name</th>
<tr ng-repeat="user in data">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</table>
<h3> Hello , click the below button to export your data to CSV</h1>
<button class="btn  btn-xs btn-white" ng-csv="data" filename="mycsvfile.csv">Download Report</button>
</body>
</html>

References:

https://github.com/asafdav/ng-csv
http://ngmodules.org/modules/ng-csv

Advertisements

About sivateja

I am a professional graduate..I am passionate about Latest Technology.
This entry was posted in angularjs and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s