Demo - Export to XLSX

HTML

<link rel="stylesheet" href="http://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.grid.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.filter.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>
<div class="container">

  <h1>
    Export to XLSX
  </h1>
  <p>
    To export FlexGrid controls to the XLSX format, you 
    should include three extra modules in your application:</p>
  <ol>
    <li>
      <b>wijmo.xlsx.js</b>:
      Provides general methods for saving and loading XLSX files.</li>
    <li>
      <b>wijmo.grid.xlsx.js</b>:
      Contains the <b>FlexGridXlsxConverter</b> class that uses
      <b>wijmo.xlsx.js</b> to save FlexGrid controls as XLSX or
      to load XLSX files into FlexGrid controls.</li>
      <li><b><a href="https://stuk.github.io/jszip/" target="_blank">jszip.js</a></b>:
      Javascript library for creating, reading and editing ZIP files..</li>
  </ol>    
  <p>
    To export a FlexGrid to XLSX, call the 
    <b>FlexGridXlsxConverter.save</b> method to obtain a 'book' 
    object. You may modify the book object before saving it, by 
    adding or renaming sheets for example.
    Once the 'book' is ready, call its <b>save</b> method to
    create the XLSX file.</p>
    
  <button id="btnExport" class="btn btn-default">
    Export to XLSX
  </button>
  
  <div id="theGrid"></div>
  
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin: 12px 0;
}
body {
  margin-bottom: 20px;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  var data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
    	id: i,
      country: countries[i % countries.length],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

  // show the data in a grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  itemsSource: getWijmoGridDataSource_VerticalFinancialStatementFlexGrid(),
childItemsPath: 'details',
 selectionMode: wijmo.grid.SelectionMode.Row ,
 isReadOnly: true ,
 autoSizeMode: wijmo.grid.AutoSizeMode.Both,
 allowSorting: false ,
 allowAddNew: false
  });
  
  // add a filter to show that it works while exporting
  var f = new wijmo.grid.filter.FlexGridFilter(theGrid);
  
	// export grid to XLSX
  document.getElementById('btnExport').addEventListener('click', function() {

			// create book with current view
      var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(theGrid, {
      	includeColumnHeaders: true,
        includeRowHeaders: true
			});
      book.sheets[0].name = 'Learn Wijmo';
      console.log(book);
			// save the book
      book.save('LearnWijmo.xlsx');
  })
  
  
  
  function getWijmoGridDataSource_VerticalFinancialStatementFlexGrid() {var data = []
data.push(
{
	account:"abc1",
  value:'abc1',
  details:[{
  	account:"abc11",
    value:'abc11',
    details:[{
    	account:"abc111",
      value:'abc111',
      details:[{
        account:"abc1111",
        value:'abc1111',
        details:[{

        }]

    }]
    }]
    },{
    account:"abc12",
    value:'abc12',
    details:[{

    }]
    },{
    account:"abc13",
    value:'abc13',
    details:[{

    }]
  }]
 },
 {
  account:"abc2",
  value:'abc2',
  details:[{
  	account:"abc21",
    value:'abc21',
    details:[{

    }]
    },{
    account:"abc22",
    value:'abc22',
    details:[{

    }]
    },{
    account:"abc23",
    value:'abc23',
    details:[{

    }]
  }]
}
);...