Last active
October 11, 2024 15:25
-
-
Save pankaj28843/8252417 to your computer and use it in GitHub Desktop.
Integrating xlsx-reader.js in an Angular app Blog post - http://psjinx.com/programming/2014/01/04/parsing-excel-workbooks-using-javascript/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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; | |
}); | |
}; | |
}; | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Am getting TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'.
Please help me