Demo - Export to XLSX and PDF

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.olap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.pdf.min.js"></script>
<div class="container">

  
    <div class="col-xs-12">
      <div id="grid"></div>
    </div>
    <br>
  
  <p>
    Export to:
    
    <button id="xlsx" class="btn btn-primary">
      XLSX
    </button>
    
  </p>
</div>

CSS

.wj-flexgrid{
  max-height:400px;
}

body {
  margin: 48pt;
}

JavaScript

onload = function() {

 var grid= new wijmo.grid.FlexGrid("#grid",{
 	itemsSource:getData(30000)
 })

// export the grid to XLSX
  // NOTE: requires jszip, wijmo.xlsx, and wijmo.grid.xlsx
  document.getElementById('xlsx').addEventListener('click', function() {
    var start = new Date().valueOf();
    console.log(new Date(start))
    wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, {
      includeColumnHeaders: true,
      includeCellStyles: true
    },"Grid.xlsx");
    var end=new Date().valueOf();
    console.log(new Date(end))
    alert("time consumed : " + (end-start)/1000+"s")
  })

  
  // get the raw data
  function getData(cnt) {
    var today = new Date(),
      buyers = 'Mom,Dad,Kelly,Sheldon'.split(','),
      types = 'Food,Clothes,Fuel,Books,Sports,Music'.split(','),
      data = [];
    for (var i = 0; i < cnt; i++) {
      data.push({
        date: wijmo.DateTime.addDays(today, -Math.random() * 365 * 3),
        buyer: randomItem(buyers),
        type: randomItem(types),
        amount: 20 + Math.random() * 1000
      });
    }
    return data;
  }

  function randomItem(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
  }
  
}