Post
Ask Question

Export JSON in XLS Format Using AngularJS

In this code snippet you can find complete solution to export JSON as XLS format using AngularJS.
 
Step 1 Include alasql.js service in your application from this url http://alasql.org/console/alasql.js
 
Step 2 Create HTML Page with app and controller according your application. Add button for export.
  1. <button type="submit" ng-click="exportData()" data-ng-disabled="!searchCaseResults.length" class="btn btn-primary pull-right">Export</button>  
Step 3 Write code in your angular controller.
  1. //Start*To Export SearchTable data in excel  
  2. // create XLS template with your field.  
  3.     var mystyle = {         
  4.         headers:true,        
  5.         columns: [  
  6.           { columnid: 'CaseId', title: 'Case Id'},  
  7.           { columnid: 'ClientName', title: 'Client Name'},  
  8.           { columnid: 'PatientName', title: 'Patient Name'},  
  9.           { columnid: 'BillCharge', title: 'Billed Amount'},  
  10.           { columnid: 'DocCreatedDate', title: 'Doc Created On' },  
  11.           { columnid: 'CaseStatusValue', title: 'Status'},  
  12.           { columnid: 'CaseCategory', title: 'Category'},  
  13.           { columnid: 'ClientType', title: 'ClientType'},  
  14.         ],         
  15.     };  
  16.   
  17. // function to use on ng-click.  
  18. //$scope.searchCaseResult is your json data which cominmg from database or Controller.  
  19.     $scope.exportData = function () {  
  20.   
  21.         //get current system date.         
  22.         var date = new Date();  
  23.         $scope.CurrentDateTime = $filter('date')(new Date().getTime(), 'MM/dd/yyyy HH:mm:ss');          
  24.         //To convert Date[mm/dd/yyyy] from jsonDate "/Date(1355287447277)/"  
  25.         for(var i=0; i<$scope.searchCaseResult.length;i++)  
  26.         {  
  27.             $scope.searchCaseResult[i].DocCreatedDate;  
  28.             var dateString = $scope.searchCaseResult[i].DocCreatedDate.substr(6);  
  29.             var currentTime = new Date(parseInt(dateString));  
  30.             var month = currentTime.getMonth() + 1;  
  31.             var day = currentTime.getDate();  
  32.             var year = currentTime.getFullYear();  
  33.             var date = month + "/" + day + "/" + year;  
  34.             $scope.searchCaseResult[i].DocCreatedDate = date;              
  35.         }  
  36.         //Create XLS format using alasql.js file.  
  37.         alasql('SELECT * INTO XLS("SearchResult' + $scope.CurrentDateTime + '.xls",?) FROM ?', [mystyle, $scope.searchCaseResult]);  
  38.     };  
  39. //End*To Export SearchTable data in excel   
According your requirement you can change column name in XLS template.