Reading Excel file in AngularJS

Reading Excel files in AngularJS is a common requirement for enterprise-level applications that rely on structured data imports. While AngularJS (v1.x) is an older framework, it's still used in legacy systems. In this guide, we’ll demonstrate how to read Excel files using AngularJS and convert them into usable JavaScript objects.

Reading Excel file in AngularJS

Getting Started

AngularJS client-side code (JavaScript) does not natively support reading Excel files directly. However, GitHub provides the SheetJS JavaScript library (Spreadsheet Parser and Writer), which can be used to read Excel files using jQuery. Currently, two jQuery-compatible libraries (xlsx.core.min.js,xls.core.min.js) are available on GitHub. As their names suggest, these libraries are used to read Excel files with the extensions .xlsx and .xls, respectively.

The following code example allows you to browse and upload an Excel file using an HTML5 file input control. With the help of the aforementioned SheetJS library, it parses each row of the Excel sheet into a JSON object. The library treats each column header as a property name and the corresponding cell values as the property values. Refer to the code below for a demonstration.

Code Example of Reading Excel file in AngularJS

 <HTML ng-app="studentapp">  
 <HEAD>  
 <TITLE>  
 Learning AngularJS  
 </TITLE>  
 <script src="angular.min.js"></script>   
 <script src="jquery-1.10.2.min.js" type="text/javascript"></script>   
 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>   
 <script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>   
 <script type="text/javascript">  
 var app=angular.module("studentapp",[]);   
 app.controller("studentcontroller",function($scope){   
 $scope.students=[   
    {StudentRollNo:1,StudentName:"Kailash",Class:"1 std",Div:"A"},   
    {StudentRollNo:2,StudentName:"Sudhir",Class:"1 std",Div:"B"},   
    {StudentRollNo:3,StudentName:"Pankaj",Class:"2 std",Div:"C"},   
    {StudentRollNo:4,StudentName:"Panxi",Class:"2 std",Div:"D"},   
    {StudentRollNo:5,StudentName:"Praban",Class:"3 std",Div:"E"},   
    {StudentRollNo:6,StudentName:"Praphul",Class:"3 std",Div:"F"},   
    ]   
 $scope.ReadExcelData=function() {  
       var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;  
       /*Checks whether the file is a valid excel file*/  
       if (regex.test($("#ngexcelfile").val().toLowerCase())) {  
         var xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/  
         if ($("#ngexcelfile").val().toLowerCase().indexOf(".xlsx") > 0) {  
           xlsxflag = true;  
         }  
         /*Checks whether the browser supports HTML5*/  
         if (typeof (FileReader) != "undefined") {  
           var reader = new FileReader();  
           reader.onload = function (e) {  
             var data = e.target.result;  
             /*Converts the excel data in to object*/  
             if (xlsxflag) {  
               var workbook = XLSX.read(data, { type: 'binary' });  
             }  
             else {  
               var workbook = XLS.read(data, { type: 'binary' });  
             }  
             /*Gets all the sheetnames of excel in to a variable*/  
             var sheet_name_list = workbook.SheetNames;  
             var cnt = 0; /*This is used for restricting the script to consider only first sheet of excel*/  
             sheet_name_list.forEach(function (y) { /*Iterate through all sheets*/  
               /*Convert the cell value to Json*/  
               if (xlsxflag) {  
                 var exceljson = XLSX.utils.sheet_to_json(workbook.Sheets[y]);  
               }  
               else {  
                 var exceljson = XLS.utils.sheet_to_row_object_array(workbook.Sheets[y]);  
               }  
               if (exceljson.length > 0) {  
                 for (var i = 0; i < exceljson.length; i++) {  
                                      $scope.students.push(exceljson[i]);  
                                      $scope.$apply();  
                                         }  
               }  
             });  
           }  
           if (xlsxflag) {/*If excel file is .xlsx extension than creates a Array Buffer from excel*/  
             reader.readAsArrayBuffer($("#ngexcelfile")[0].files[0]);  
           }  
           else {  
             reader.readAsBinaryString($("#ngexcelfile")[0].files[0]);  
           }  
         }  
         else {  
           alert("Sorry! Your browser does not support HTML5!");  
         }  
       }  
       else {  
         alert("Please upload a valid Excel file!");  
       }  
     }  
     });  
   </script>  
 </HEAD>  
 <BODY ng-controller="studentcontroller" border="1">  
 <h2>Reading Excel data in AngularJS</h2>  
 <hr/>  
  <form>  
 <input type="file" id="ngexcelfile" />   
 <input type="button" value="Read Data" ng-click="ReadExcelData()" />   
    <br />   
    <br />  
 <table border=1>  
 <thead>  
 <tr>  
 <th>Student Name</th>  
 <th>Roll No.</th>  
 <th>Class</th>  
 <th>DIV</th>  
 </tr>  
 </thead>  
 <tbody>  
 <tr ng-repeat="item in students">   
 <td>{{item.StudentName}}</td>    
  <td>{{item.StudentRollNo}}</td>   
  <td>{{item.Class}}</td>   
 <td>{{item.Div}}</td>   
  </tr>   
 </tbody>  
 </table>   
 </form>  
 </BODY  
 </HTML>

Summary

In this blog, we explored a code example for reading Excel files in AngularJS. The example demonstrates how to display Excel data in the UI. However, the data can also be passed to a remote service, as the above libraries convert the Excel content into JSON objects. We hope you found this guide helpful and informative.

Thanks

Reading Excel file in AngularJS