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 gave an instruction for her where she can export all the data/information in a CSV file by clicking the Download CSV button.
And in this article, I will share this requirement with you with an example and also show you how I archived this requirement which may help you to store this type of requirement.
Application
For the purpose of the demonstration, I will use some dummy data for a better understanding. So let’s start with an example, you just need to follow a few steps described below.
Level 1: Open Visual Studio 2013.
level2: Click File from above menu >> New >> Website.
Step 3: Now you can see one popup window on your screen where you just select your language C# or Visual Basic and select blank website template or web forms website and just save this project in your preferred location and click OK.
Step 4: You can see in your root directory that there is one web form available Default. aspx. where you need to write the following code.
Step 5: Before actually writing code, you need to link the bootstrap css and the required angularJS script file before the end 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 a CSV file before the end <גוף> 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; cursor: pointer; color:#FFF; } h1{ color:#ff0097; } .btncol { background-color: #ff0097; cursor: pointer; 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"> </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 source code above, I linked the required CSS file and Angular script file and in my application definition, I have to add “CSV“Dependencies.
“CSV” is an AngularJS directive that turns arrays and objects into downloadable files called CSV files.
I also used the prompt ng-back and ng-back directive is perfect for displaying an HTML table as well as using a directive ng-app And it is described as the root element of an AngularJS application and named where ng-controller Defining a controller in my AngularJs application here my controller is MyController that control the flow of data in my application and is a 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"> </span>Download CSV</button>
Look, the above code of the CSV download button is where I used ng-CSV Instructions to make CSV files downloadable and also instructions in use CSV header And where is the file name? CSV header will return an array containing those elements that are in the first array and not in the others and the file name bears the name of a CSV file with a file extension (.csv).
Productivity
| employee card | Employee’s name | platoon | destiny | City | Contact number |
|---|---|---|---|---|---|
| {{reg.EmpId}} | {{reg.EmployeeName}} | {{T. Department}} | {{reg.Designation}} | {{reg.City}} | {{reg.ContactNo}} |
Summary
This article explains how to export JSON data to Excel/CSV files using angular js using bootstrap and also how to create downloadable Excel/CSV files in angular js.
I hope this article will help you to develop your AngularJs application, if you have any questions you can ask me, just leave your comments.
