Integrating xlsx-reader.js in an Angular app Blog post - http://psjinx.com/programming/2014/01/04/parsing-excel-workbooks-using-javascript/

app-services.js

(function(undefined) {
    // Get angular app
    var app = angular.module("App");

    app.factory("XLSXReaderService", ['$q', '$rootScope',
        function($q, $rootScope) {
            var service = function(data) {
                angular.extend(this, data);
            };

            service.readFile = function(file, showPreview) {
                var deferred = $q.defer();

                XLSXReader(file, showPreview, function(data){
                    $rootScope.$apply(function() {
                        deferred.resolve(data);
                    });
                });

                return deferred.promise;
            };

            return service;
        }
    ]);
}).call(this);

controller.js

'use strict';

angular.module('App').controller('PreviewController', function($scope, XLSXReaderService) {
    $scope.showPreview = false;

    $scope.fileChanged = function(files) {
        $scope.sheets = [];
        $scope.excelFile = files[0];
        XLSXReaderService.readFile($scope.excelFile, $scope.showPreview).then(function(xlsxData) {
            $scope.sheets = xlsxData.sheets;
        });
    };

    $scope.showPreviewChanged = function() {
        if ($scope.showPreview) {
            XLSXReaderService.readFile($scope.excelFile, $scope.showPreview).then(function(xlsxData) {
                $scope.sheets = xlsxData.sheets;
            });
        };
    };
});

preview.html

<div ng-app='App'>
    <div class="" ng-controller="PreviewController">
        <h4>XLSX Reader demo</h4>
        <form action="" method="post" enctype="multipart/form-data">
            <div class='form-group'>
                <label for='excel_file'>Excel File</label>
                <input type="file" name="excel_file" accept=".xlsx" onchange="angular.element(this).scope().fileChanged(this.files);" required="true">
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="showPreview" ng-change="showPreviewChanged();">Show preview of excel file
                </label>
            </div>

            <div class='form-group'>
                <label for='sheet_name'>Sheet Name</label>
                <select id="sheet_name" class="form-control" ng-model="selectedSheetName" required="true" ng-required="true" ng-options="sheetName as sheetName for (sheetName, sheetData) in sheets">
                    <option value="">---- Select a sheet ----</option>
                </select>
            </div>

            <input type="hidden" name="sheet_name" value="{{ selectedSheetName }}">

            <input type="submit" value="Submit">

            <div ng-show="showPreview">
                <table class="table table-bordered" ng-repeat="(sheetName, sheetData) in sheets" ng-show="sheetName == selectedSheetName">
                    <thead>
                        <tr>
                            <th ng-bind="sheetName"></th>
                        </tr>
                    </thead>
                    <tr ng-repeat="row in sheetData.data">
                        <td ng-repeat="col in row" ng-bind="col"></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>

Nice snippet! I'm just curious that what is the usefulness of the following code:

var service = function(data) {
    angular.extend(this, data);
}; 

Instead of:

var service;

I try this code but it is not working..

i have got error at 'fileChanged' can not read

Am getting TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'.

Please help me