Export to excel using AngularJS

Posted By : Manish Kumar Narang | 30-Sep-2017

In this blog, i will explain how to export JSON data into excel in AngularJS. We need a JSON file which we need to export in the controller of angularjs and we should be able to call from the HTML file. We will look at both. But before we start, we need to first add two files in our angular library. Those two files are json-export-excel.js and filesaver.js. Moreover, we need to include the dependency in the angular module. So the first two steps can be summarised as follows -

1) Add json-export.js and filesaver.js in your angular library.

2) Include the dependency of ngJsonExportExcel in your angular module. 

          var myapp = angular.module('myapp', ['ngJsonExportExcel'])
        

Now that we have included the necessary files we can move on to the changes which need to be made in the HTML file and the controller. We assume that a json is being created on the controller either manually or by making a call to the backend.

HTML :

   

In the application I worked, I brought paginated results from the backend. Therefore, I had two options for exporting to excel. One for the current page and one for all data. Once the user selects an option, a call goes to the controller which prepares a json (list). Each object in the list forms a row in the excel. 

Controller - 

$scope.getDataForCurrentPage = function(){
	    	$scope.currentPageList = [];
	    	var attendanceData = angular.copy($scope.pageScope.attendanceData);
	    	var firstRow = angular.copy($scope.pageScope.oneRowForPrint);
	    	
	    		firstRow.day1 = moment($scope.pageScope.datesOfWeek[0]).format('ll');
	    		firstRow.day2 = moment($scope.pageScope.datesOfWeek[1]).format('ll');
	    		firstRow.day3 = moment($scope.pageScope.datesOfWeek[2]).format('ll');
	    		firstRow.day4 = moment($scope.pageScope.datesOfWeek[3]).format('ll');
	    		firstRow.day5 = moment($scope.pageScope.datesOfWeek[4]).format('ll');
	    		firstRow.day6 = moment($scope.pageScope.datesOfWeek[5]).format('ll');
	    		firstRow.day7 = moment($scope.pageScope.datesOfWeek[6]).format('ll');
	    	
	    	$scope.currentPageList.push(firstRow);
            for (var i=0; i < attendanceData.length;i++){
	    		var oneRow = angular.copy($scope.pageScope.oneRowForPrint);
	    		oneRow.name = attendanceData[i].userData.firstName + " " + attendanceData[i].userData.lastName;
	    		oneRow.employeeId = attendanceData[i].userData.employeeId;
	    		oneRow.day1 = attendanceData[i].dailyDayTotal[0].leave;
    		    oneRow.day2 = attendanceData[i].dailyDayTotal[1].leave;
    		    oneRow.day3 = attendanceData[i].dailyDayTotal[2].leave;
    		    oneRow.day4 = attendanceData[i].dailyDayTotal[3].leave;
    		    oneRow.day5 = attendanceData[i].dailyDayTotal[4].leave;
    		    oneRow.day6 = attendanceData[i].dailyDayTotal[5].leave;
    		    oneRow.day7 = attendanceData[i].dailyDayTotal[6].leave;
		    	
	    		oneRow.weekly = $scope.timeFormat(attendanceData[i].weeklyTotal);
	    		$scope.currentPageList.push(oneRow);
	    	}
           console.log("currentPage : ",$scope.currentPageList);
	    	var element = angular
            .element(document
                .getElementById('excelReportForCurrentPage'));
            $timeout(function() {
                    element[0].click();
                    }, 0);
        }

 

 

 

About Author

Author Image
Manish Kumar Narang

Manish Narang has skills in software development. He is enthusiastic about web applications and loves to work in a team.

Request for Proposal

Name is required

Comment is required

Sending message..