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
1) Add
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
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
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);
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.