angular.module('app', ['ui.grid'])
.controller('MainCtrl', ['$scope', function ($scope) {
var vm = this;
vm.gridOptions = {};
vm.reset = reset;
function reset() {
vm.gridOptions.data = [];
vm.gridOptions.columnDefs = [];
}
}])
.directive("fileread", [function () {
return {
scope: {
opts: '='
},
link: function ($scope, $elm, $attrs) {
$elm.on('change', function (changeEvent) {
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function () {
var data = evt.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
var data = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
$scope.opts.columnDefs = [];
headerNames.forEach(function (h) {
$scope.opts.columnDefs.push({ field: h });
});
$scope.opts.data = data;
$elm.val(null);
});
};
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}
}
}]);
body {
/* font-family: Verdana; */
padding: 20px;
}
.grid {
width: 100%;
height: 250px;
}
.grid-msg-overlay {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
.grid-msg-overlay .msg {
opacity: 1;
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 50%;
background-color: #eee;
border-radius: 4px;
border: 1px solid #555;
text-align: center;
font-size: 24px;
display: table;
}
.grid-msg-overlay .msg > .center {
display: table-cell;
vertical-align: middle;
}
.grid input[type="file"] {
font-size: 14px;
display: inline-block;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl as vm">
<button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button>
<br />
<br />
<div id="grid1" ui-grid="vm.gridOptions" class="grid">
<div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
<div class="msg">
<div class="center">
<span class="muted">Select Spreadsheet File</span>
<br />
<input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="false" />
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
[
{
"name": "Lesa",
"age": 30,
"gender": "female"
},
{
"name": "Bettye",
"age": 29,
"gender": "female"
},
{
"name": "Contreras",
"age": 23,
"gender": "male"
},
{
"name": "Cameron",
"age": 28,
"gender": "male"
},
{
"name": "Robin",
"age": 20,
"gender": "female"
},
{
"name": "Brenda",
"age": 25,
"gender": "female"
},
{
"name": "Fleming",
"age": 26,
"gender": "male"
},
{
"name": "Cathryn",
"age": 23,
"gender": "female"
},
{
"name": "Hyde",
"age": 25,
"gender": "male"
},
{
"name": "Sarah",
"age": 23,
"gender": "female"
},
{
"name": "Alston",
"age": 28,
"gender": "male"
},
{
"name": "Conrad",
"age": 21,
"gender": "male"
},
{
"name": "Garza",
"age": 23,
"gender": "male"
},
{
"name": "Charles",
"age": 21,
"gender": "male"
},
{
"name": "Herminia",
"age": 20,
"gender": "female"
},
{
"name": "Joy",
"age": 27,
"gender": "female"
},
{
"name": "Meredith",
"age": 26,
"gender": "female"
},
{
"name": "Leach",
"age": 24,
"gender": "male"
},
{
"name": "Sosa",
"age": 24,
"gender": "male"
},
{
"name": "Savage",
"age": 29,
"gender": "male"
},
{
"name": "Morrison",
"age": 25,
"gender": "male"
},
{
"name": "Frankie",
"age": 29,
"gender": "female"
},
{
"name": "Annabelle",
"age": 26,
"gender": "female"
},
{
"name": "Bonnie",
"age": 23,
"gender": "female"
},
{
"name": "Dina",
"age": 26,
"gender": "female"
},
{
"name": "Marva",
"age": 23,
"gender": "female"
},
{
"name": "Jennings",
"age": 21,
"gender": "male"
},
{
"name": "Barbara",
"age": 20,
"gender": "female"
},
{
"name": "Bruce",
"age": 27,
"gender": "male"
},
{
"name": "Albert",
"age": 24,
"gender": "male"
},
{
"name": "Elvira",
"age": 29,
"gender": "female"
},
{
"name": "Araceli",
"age": 23,
"gender": "female"
},
{
"name": "Bullock",
"age": 20,
"gender": "male"
},
{
"name": "Victoria",
"age": 23,
"gender": "female"
},
{
"name": "Matthews",
"age": 21,
"gender": "male"
},
{
"name": "Case",
"age": 28,
"gender": "male"
},
{
"name": "Amie",
"age": 20,
"gender": "female"
},
{
"name": "Ruby",
"age": 29,
"gender": "female"
},
{
"name": "Linda",
"age": 28,
"gender": "female"
},
{
"name": "Tracey",
"age": 20,
"gender": "female"
},
{
"name": "Diaz",
"age": 23,
"gender": "male"
},
{
"name": "Priscilla",
"age": 24,
"gender": "female"
},
{
"name": "Dixie",
"age": 26,
"gender": "female"
},
{
"name": "Sharron",
"age": 22,
"gender": "female"
},
{
"name": "Deidre",
"age": 21,
"gender": "female"
},
{
"name": "Potter",
"age": 24,
"gender": "male"
},
{
"name": "Mcdonald",
"age": 29,
"gender": "male"
},
{
"name": "Hartman",
"age": 30,
"gender": "male"
},
{
"name": "Cook",
"age": 30,
"gender": "male"
},
{
"name": "Powell",
"age": 20,
"gender": "male"
},
{
"name": "Janette",
"age": 30,
"gender": "female"
},
{
"name": "Mcfarland",
"age": 21,
"gender": "male"
},
{
"name": "Lorena",
"age": 24,
"gender": "female"
},
{
"name": "Bright",
"age": 28,
"gender": "male"
},
{
"name": "Ester",
"age": 23,
"gender": "female"
},
{
"name": "Marks",
"age": 30,
"gender": "male"
},
{
"name": "Christa",
"age": 30,
"gender": "female"
},
{
"name": "Gray",
"age": 26,
"gender": "male"
},
{
"name": "Benjamin",
"age": 25,
"gender": "male"
},
{
"name": "Lacy",
"age": 28,
"gender": "female"
},
{
"name": "Belinda",
"age": 28,
"gender": "female"
},
{
"name": "Diane",
"age": 23,
"gender": "female"
},
{
"name": "Gross",
"age": 30,
"gender": "male"
},
{
"name": "Wise",
"age": 27,
"gender": "male"
},
{
"name": "Dunlap",
"age": 26,
"gender": "male"
},
{
"name": "Ferrell",
"age": 22,
"gender": "male"
},
{
"name": "Durham",
"age": 24,
"gender": "male"
},
{
"name": "Gertrude",
"age": 20,
"gender": "female"
},
{
"name": "Marla",
"age": 25,
"gender": "female"
},
{
"name": "Kemp",
"age": 23,
"gender": "male"
},
{
"name": "Murray",
"age": 21,
"gender": "male"
},
{
"name": "Naomi",
"age": 20,
"gender": "female"
},
{
"name": "Love",
"age": 20,
"gender": "male"
},
{
"name": "Angelita",
"age": 24,
"gender": "female"
},
{
"name": "Zamora",
"age": 20,
"gender": "male"
},
{
"name": "Keri",
"age": 28,
"gender": "female"
},
{
"name": "Pruitt",
"age": 23,
"gender": "male"
},
{
"name": "Joyce",
"age": 28,
"gender": "female"
},
{
"name": "Lula",
"age": 24,
"gender": "female"
},
{
"name": "Hall",
"age": 20,
"gender": "male"
},
{
"name": "Head",
"age": 23,
"gender": "male"
},
{
"name": "Haynes",
"age": 22,
"gender": "male"
},
{
"name": "Craig",
"age": 27,
"gender": "male"
},
{
"name": "Baxter",
"age": 26,
"gender": "male"
},
{
"name": "Delores",
"age": 25,
"gender": "female"
},
{
"name": "Bernard",
"age": 24,
"gender": "male"
},
{
"name": "Desiree",
"age": 26,
"gender": "female"
},
{
"name": "Chrystal",
"age": 24,
"gender": "female"
},
{
"name": "Stokes",
"age": 26,
"gender": "male"
},
{
"name": "Griffin",
"age": 23,
"gender": "male"
},
{
"name": "Lawanda",
"age": 27,
"gender": "female"
},
{
"name": "Ford",
"age": 27,
"gender": "male"
},
{
"name": "Lucile",
"age": 26,
"gender": "female"
},
{
"name": "Carroll",
"age": 30,
"gender": "male"
},
{
"name": "Skinner",
"age": 28,
"gender": "male"
},
{
"name": "Celina",
"age": 25,
"gender": "female"
},
{
"name": "Pope",
"age": 29,
"gender": "male"
},
{
"name": "Leah",
"age": 29,
"gender": "female"
},
{
"name": "Rosie",
"age": 25,
"gender": "female"
},
{
"name": "Miriam",
"age": 27,
"gender": "female"
}
]