JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://alasql.org/console/alasql.min.js"></script>
<script src="http://alasql.org/console/xlsx.core.min.js"></script>
<div ng-app>
  <div ng-controller="myCtrl as tc">
    <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>
    <input type="file" ng-mouseleave="tc.loadFile($event)" />
  </div>
</div>

JavaScript

function myCtrl($scope,$rootScope) {
var vm = this;
  $scope.exportData = function() {
    alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?', [$scope.items]);
  };
  
  vm.loadFile = function (event) {
  console.log(event)
        if (event.fromElement.files.length==0) {
            return false;   // leave in case no file was chosen
        };
        alasql('SELECT * FROM FILE(?,{headers:true})', [event], function (data) {
            $rootScope.eData = data;     //  eData contains the JSON representation of the Excel sheet rows
            console.log(data)
        }); 
    };

  $scope.items = [{
    name: "John Smith",
    email: "j.smith@example.com",
    dob: "1985-10-10"
  }, {
    name: "Jane Smith",
    email: "jane.smith@example.com",
    dob: "1988-12-22"
  }, {
    name: "Jan Smith",
    email: "jan.smith@example.com",
    dob: "2010-01-02"
  }, {
    name: "Jake Smith",
    email: "jake.smith@exmaple.com",
    dob: "2009-03-21"
  }, {
    name: "Josh Smith",
    email: "josh@example.com",
    dob: "2011-12-12"
  }, {
    name: "Jessie Smith",
    email: "jess@example.com",
    dob: "2004-10-12"
  }];
};