In this article I will explain with an example, how to read Excel File (XLS and XLSX) using AngularJS and HTML5 File API.
The Excel file (XLS and XLSX) will be selected in HTML FileUpload element and will be read using HTML5 FileReader API.
The read data will be parsed into a JSON Array using the xlsx Excel plugin and later the JSON Array will be used to populate a HTML Table using ng-repeat directive in AngularJS.
 
 
Read Excel File using AngularJS and display its data in HTML Table
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The following AngularJS App makes use of ngFileUpload module.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML Table which will be populated from JSON array using ng-repeat directive, a FileUpload element and a Button.
Selecting the File
The HTML FileUpload element has been assigned the ngf-select directive so that when files are selected in the HTML FileUpload element, it makes call to the SelectFile function inside the AngularJS controller.
Inside the SelectFile function, the selected File is assigned to the SelectedFile variable.
 
Reading the Excel File and display data in HTML Table
When the Upload Button is clicked, the Upload function is called.
Inside the Upload function, first a check is performed to verify whether the file is a valid Excel file with extension XLS or XSLX. Then a check is performed to make sure whether the browser supports HTML5 File API.
The Excel file is read as Binary data using HTML5 FileReader and then the Binary data is read using the xlsx Excel plugin which returns rows from Excel in JSON Array format.
Finally, the JSON Array is assigned to the Customers scope variable which ultimately populates the HTML Table using ng-repeat directive.
Note: Inside the onload event handler of HTML5 FileReader, the scope is not available and hence $.apply function is used to apply the scope.
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', ['ngFileUpload'])
    app.controller('MyController', function ($scope, $window) {
        $scope.SelectFile = function (file) {
            $scope.SelectedFile = file;
        };
        $scope.Upload = function () {
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
            if (regex.test($scope.SelectedFile.name.toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    //For Browsers other than IE.
                    if (reader.readAsBinaryString) {
                        reader.onload = function (e) {
                            $scope.ProcessExcel(e.target.result);
                        };
                        reader.readAsBinaryString($scope.SelectedFile);
                    } else {
                        //For IE Browser.
                        reader.onload = function (e) {
                            var data = "";
                            var bytes = new Uint8Array(e.target.result);
                            for (var i = 0; i < bytes.byteLength; i++) {
                                data += String.fromCharCode(bytes[i]);
                            }
                            $scope.ProcessExcel(data);
                        };
                        reader.readAsArrayBuffer($scope.SelectedFile);
                    }
                } else {
                    $window.alert("This browser does not support HTML5.");
                }
            } else {
                $window.alert("Please upload a valid Excel file.");
            }
        };
 
        $scope.ProcessExcel = function (data) {
            //Read the Excel File data.
            var workbook = XLSX.read(data, {
                type: 'binary'
            });
 
            //Fetch the name of First Sheet.
            var firstSheet = workbook.SheetNames[0];
 
            //Read all rows from First Sheet into an JSON array.
            var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
 
            //Display the data from Excel file in Table.
            $scope.$apply(function () {
                $scope.Customers = excelRows;
                $scope.IsVisible = true;
            });
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <input type="file" ngf-select="SelectFile($file)" />
    <input type="button" value="Upload" ng-click="Upload()" />
    <hr />
    <table id="tblCustomers" cellpadding="0" cellspacing="0" ng-show="IsVisible">
        <tr>
            <th>Customer Id</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tbody ng-repeat="m in Customers">
            <tr>
                <td>{{m.Id}}</td>
                <td>{{m.Name}}</td>
                <td>{{m.Country}}</td>
            </tr>
        </tbody>
    </table>
</div>
 
 

Screenshots
Contents of the Excel file placed on user’s folder
Read Excel File using AngularJS and HTML5 File API
 
The Excel file being displayed in browser as HTML Table
Read Excel File using AngularJS and HTML5 File API
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads