Export JSON Data to Excel/CSV File using AngularJs With Bootstrap

watch_later Wednesday, December 12, 2018

Introduction


In this article i am going to explain how to export JSON data to excel/csv file using angularJs with using bootstrap and also show you how you can create downloadable excel/csv file in angularjs as well as how you can display JSON data in web form using Angularjs.
JSON To CSV Using AngularJs with Bootstrap
JSON To CSV Using AngularJs with Bootstrap

While You working with any data driven application either that is simple desktop application, mobile application or any web application sometime your client demands data/information in excel or csv file directly from your database or from web page based on his/her requirement and at that time you need to export all the required data in to excel or csv file.

Today i got same requirement from my client "Donna helms" she has great business of flowers in USA and and currently i working on her project. Recently few days ago i have created weekly salary report of florist for her. Now she needs all the records in csv file, so i have gived a provision to her where she can export all the data/information in csv file by clicking on Download CSV button. And in this article i will share this requirement with you with an example and also show you how i have i archived this requirement that may helps you to to archive this kind of requirement.

Implementation


For Demonstration i'll take helps of some dummy data for better understanding. So, Let's start with an example, you have to just follow some steps described below.

Step 1: Open Visual Studio 2013.

Step 2: Click on File from Top Menu >> New >> Website.

Step 3: Now You can See one popup window on your screen where you just select your language either C# or Visual Basic and select website template empty website or web forms site and just save this project on your  preferred location and click on OK.

Step 4: you can see in your root directory there is one web form is available Default.aspx. where you need to write following code.

Step 5: Before write actual code you need to link css of bootstrap and required script file of angularJS before end <head> tag.

CSS

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Script

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.3/ng-csv.min.js"></script>
Step 6: Now, You need to create module, angular controller and sample json data to Export CSV File before end <body> tag.
<script>
var app = angular.module("csvApp", ["ngSanitize""ngCsv"]);
 
app.controller("MyController", ["$scope",
  function($scope) {
    $scope.MyCSV = [{
      EmpId: 1001,
      EmployeeName: 'Nikunj Stasiya',
      Department: 'Information Technology',
      Designation: 'Sr.Software Engineer',
      City: 'Surat, India',
      ContactNo: '9*******24'
    },{
      EmpId: 1002,
      EmployeeName: 'Hiren Dobariya',
      Department: 'Information Technology',
      Designation: 'Sr.Software Engineer',
      City: 'Rajkot, India',
      ContactNo: '8*******96'
    },{
      EmpId: 1003,
      EmployeeName: 'Vivek Ghadiya',
      Department: 'Information Technology',
      Designation: 'Web Developer',
      City: 'Jamnagar, India',
      ContactNo: '7*******98'
    },{
      EmpId: 1004,
      EmployeeName: 'Milan lathiya',
      Department: 'Information Technology',
      Designation: 'Android Application Developer',
      City: 'Surat, India',
      ContactNo: '8*******77'
    },{
      EmpId: 1005,
      EmployeeName: 'Kishan Kotadiya',
      Department: 'Information Technology',
      Designation: 'Web Developer',
      City: 'Surat, India',
      ContactNo: '7*******53'
    },{
      EmpId: 1006,
      EmployeeName: 'Sarah Demola',
      Department: 'Information Technology',
      Designation: 'Software Engineer',
      City: 'California, USA',
      ContactNo: '7*******22'
    }];
  }
]);
</script>

HTML Markup

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.3/ng-csv.min.js"></script>
<style>
.table > tbody > tr:hover {
  background-color#ff0097;
  cursorpointer;
  color:#FFF;
}
h1{
color:#ff0097;
}
.btncol
{
  background-color#ff0097;
  cursorpointer;
  color:#FFF;
}
</style>
</head>
<body ng-app="csvApp">
  <br>
  <div ng-controller="MyController" class="container" ng-cloack>
    <h1>Export JSON To CSV in Angular JS</h1>
    <br>
    <button type="button" class="btn btn-default btncol" ng-csv="MyCSV" filename="Codingvila_NikunjSatasiya_CSV.csv" csv-header="['Employee Id', 'Employee Name', 'Department', 'Designation', 'City', 'Contact Number']" charset="utf-8"><span class="glyphicon glyphicon-download-alt">&nbsp;</span>Download CSV</button>
    <br>
    <br>
    <div class="panel panel-default">
      <div class="panel-body">
        <table class="table">
          <thead>
            <tr>
              <th>Employee Id</th>
              <th>Employee Name</th>
              <th>Department</th>
              <th>Designation</th>
              <th>City</th>
              <th>ContactNo</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat='reg in MyCSV'>
              <td>{{reg.EmpId}}</td>
              <td>{{reg.EmployeeName}}</td>
              <td>{{reg.Department}}</td>
              <td>{{reg.Designation}}</td>
              <td>{{reg.City}}</td>
              <td>{{reg.ContactNo}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
<script>
var app = angular.module("csvApp", ["ngSanitize""ngCsv"]);
 
app.controller("MyController", ["$scope",
  function($scope) {
    $scope.MyCSV = [{
      EmpId: 1001,
      EmployeeName: 'Nikunj Stasiya',
      Department: 'Information Technology',
      Designation: 'Sr.Software Engineer',
      City: 'Surat, India',
      ContactNo: '9*******24'
    },{
      EmpId: 1002,
      EmployeeName: 'Hiren Dobariya',
      Department: 'Information Technology',
      Designation: 'Sr.Software Engineer',
      City: 'Rajkot, India',
      ContactNo: '8*******96'
    },{
      EmpId: 1003,
      EmployeeName: 'Vivek Ghadiya',
      Department: 'Information Technology',
      Designation: 'Web Developer',
      City: 'Jamnagar, India',
      ContactNo: '7*******98'
    },{
      EmpId: 1004,
      EmployeeName: 'Milan lathiya',
      Department: 'Information Technology',
      Designation: 'Android Application Developer',
      City: 'Surat, India',
      ContactNo: '8*******77'
    },{
      EmpId: 1005,
      EmployeeName: 'Kishan Kotadiya',
      Department: 'Information Technology',
      Designation: 'Web Developer',
      City: 'Surat, India',
      ContactNo: '7*******53'
    },{
      EmpId: 1006,
      EmployeeName: 'Sarah Demola',
      Department: 'Information Technology',
      Designation: 'Software Engineer',
      City: 'California, USA',
      ContactNo: '7*******22'
    }];
  }
]);
</script>
</body>
</html>

Explanation


If You analyzed above source Code then i have linked required css and anjularjs script file and in my application definition i have add "ngcsv" as a dependency."ngcsv" is AngularJS directive and that turns arrays and objects into downloadable files called as CSV file. I also have used directive ng-repeat and ng-repeat directive is perfect for displaying a html table as well as used directive ng-app and it's described as the root element of the AngularJS application and there where ng-controller defines controller in my AngularJs Application here my controller is MyController that control the flow of data in my application and that is JavaScript object that contains attributes/properties, and functions.
<button type="button" class="btn btn-default btncol" ng-csv="MyCSV" filename="Codingvila_NikunjSatasiya_CSV.csv" csv-header="['Employee Id', 'Employee Name', 'Department', 'Designation', 'City', 'Contact Number']" charset="utf-8"><span class="glyphicon glyphicon-download-alt">&nbsp;</span>Download CSV</button>
Look, the above code of download CSV button there where i have used ng-csv directives to turn downloadable csv files and also used directives csv-header and filename where csv-header will returns an array containing those elements which are present in first array and not in others and filename returns a name of csv file with (.csv) file extension.

Output/Demo

Export JSON To CSV in Angular JS

Employee Id Employee Name Department Designation City ContactNo
{{reg.EmpId}} {{reg.EmployeeName}} {{reg.Department}} {{reg.Designation}} {{reg.City}} {{reg.ContactNo}}

Summary


This article explains how to export json data to excel/csv file using ngularJs with using bootstrap as well as how you can create downloadable excel/csv file in angularjs.

I hope this article helps you to develop your AngularJs application, If you have any query you can ask me, you just leave your comments. Thank You. 

Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.



sentiment_satisfied Emoticon