JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://alasql.org/console/alasql.min.js"></script>
<div ng-app>
<div ng-controller="myCtrl">
<button ng-click="exportData()">Export</button>
<br />
<div id="exportable">
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>DoB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.dob | date:'MM/dd/yy'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JavaScript
function myCtrl($scope) {
var mystyle = {
headers:true,
column: {style:{Font:{Bold:"1"}}},
rows: {1:{style:{Font:{Color:"#FF0077"}}}},
cells: {1:{1:{
style: {Font:{Color:"#00FFFF"}}
}}}
};
$scope.exportData = function () {
alasql('SELECT * INTO XLSXML("john.xls",?) FROM ?',[mystyle,$scope.items]);
};
$scope.items = [{
name: "John Smith",
email: "[email protected]",
dob: "1985-10-10"
}, {
name: "Jane Smith",
email: "[email protected]",
dob: "1988-12-22"
}, {
name: "Jan Smith",
email: "[email protected]",
dob: "2010-01-02"
}, {
name: "Jake Smith",
email: "[email protected]",
dob: "2009-03-21"
}, {
name: "Josh Smith",
email: "[email protected]",
dob: "2011-12-12"
}, {
name: "Josh Smith",
email: "[email protected]",
dob: "2011-12-12"
}, {
name: "Josh Smith",
email: "[email protected]",
dob: "2011-12-12"
}, {
name: "Josh Smith",
email: "[email protected]",
dob: "2011-12-12"
}, {
name: "Josh Smith",
email: "[email protected]",
dob: "2011-12-12"
}, {
name: "Josh Smith",
email: "[email protected]",
dob: "2011-12-12"
}, {
name: "Josh Smith",
email: "[email protected]",
dob: "2011-12-12"
}, {
name: "Jessie Smith",
email: "[email protected]",
dob: "2004-10-12"
}];
};