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 is an experienced Backend Developer with several years of industry experience in the IT field. He possesses a wide range of skills, including expertise in Backend languages like Core Java, J2EE, Hibernate, Spring/Spring Boot, and Python. Manish is also proficient in relational databases such as MySQL, PostgreSQL, and Oracle. He has hands-on experience in API implementations, web services development, testing, and deployments. Manish has contributed to various internal and client projects, including PMO, Catalyst, Communication-Scaffold, Oodles-Dashboard, and Devops Support, delivering significant business value. He is known for his innovative mindset and excellent problem-solving abilities. He keeps himself updated with new technologies by reading about them. He is skilled at collaborating closely with clients to define project scope and requirements, establish project timelines and milestones, and manage expectations. Manish conducts regular project status meetings, ensuring regular updates to clients and stakeholders regarding project progress, risks, and issues. Additionally, he serves as a mentor and coach to junior developers, offering guidance on project management best practices and fostering their skills development.

Request for Proposal

Name is required

Comment is required

Sending message..