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

watch_later 12 December, 2018
comment 1 Comment

In this article, I am going to explain how to export JSON data to an excel/CSV file using angularJs with using bootstrap and also show you how you can create a downloadable excel/CSV file in angular js as well as how you can display JSON data in a web form using Angularjs.


JSON To CSV Using AngularJs with Bootstrap

While You working with any data-driven application whether that is a simple desktop application, mobile application, or any web application sometimes your client demands data/information in excel or CSV file directly from your database or from a 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 the same requirement from my client "Donna helms" she has a great business of flowers in the USA and currently I working on her project. 

Recently a few days ago I created a weekly salary report for the florist for her. Now she needs all the records in a CSV file.

So I have given a provision to her where she can export all the data/information in a CSV file by clicking on the Download CSV button. 

And in this article, I will share this requirement with you with an example and also show you how have I archived this requirement that may help you to archive this kind of requirement.


Implementation


For the Demonstration, I'll take the help 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 available Default. aspx. where you need to write the following code.

Step 5: Before writing actual code you need to link the CSS of bootstrap and the required script file of angularJS before the 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 a module, angular controller, and sample JSON data to Export CSV File before the 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 the above source Code then I have linked the required CSS and angular script file and in my application definition, I have to add "CSV" as a dependency.

"CSV" is an AngularJS directive that turns arrays and objects into downloadable files called CSV files.

 I also have used the directive ng-repeat and ng-repeat directive is perfect for displaying an 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 return an array containing those elements which are present in the first array and not in others and filename returns a name of CSV file with (.csv) file extension.

Output

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 files using angular js with using bootstrap as well as how you can create downloadable Excel/CSV files in angular js.

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

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.

avatar

How to get the excel data formatted the same way as on website?

delete May 20, 2021 at 6:35 PM

Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.

Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.

Sometimes I not able to give detailed level explanation for your questions or comments, if you want detailed explanation, your can mansion your contact email id along with your question or you can do select given checkbox "Notify me" the time of write comment. So we can drop mail to you.

If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com

sentiment_satisfied Emoticon