You can use the xlsx.js library to import and export FlexGrid to and from Excel files using only JavaScript or TypeScript (no server-side code). This sample uses a modified version of the xlsx.js library that provides basic Excel export and import capabilities. You can find the modified version of the library in the scripts\c1xlsx.js file. The library uses the jszip.js library to read and write the Excel files.
FlexGridExcelImportExport
In order to add the client side importing and exporting functionality to the Wijmo FlexGrid, you will need to perform the following steps:

  1. Add wijmo.grid.xlsx.d.ts and wijmo.xlsx.d.ts under scripts > definition

  2. Add wijmo.xlsx.min.js and wijmo.grid.xlsx.js under scripts > vendor

  3. In the HTML page, add the references


Referencing the libraries


These instructions assume you already have a Wijmo FlexGrid working in your application.

Inside the head of our default.html:
// Wijmo excel libraries 
<script src="scripts/vendor/wijmo.xlsx.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.grid.xlsx.js" type="text/javascript"></script>
<!-- JSZip library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>


This is all the project setup we need in our application. Once we have these libraries in our application we can call the following methods from our component class.

wijmo.grid.xlsx.FlexGridXlsxConverter.load(instanceOfGrid, {options},”FileName.xlsx”)
wijmo.grid.xlsx.FlexGridXlsxConverter.save(instanceOfGrid, {options},”FileName.xlsx”))

The load function takes an excel file ( xlsx ) and populates the specified FlexGrid instance with the parsed data.
The save function takes a FlexGrid instance as input, converts its data and formatting to Excel and returns an object containing content for the Excel file.

Let’s define our FlexGrid in our component template and assign it a local variable of flex and bind it to some data.
<wj-flex-grid #flex [itemsSource]="data">
</wj-flex-grid>

The implementation of the load and save is up to you but for this blog I chose to use two buttons for importing and exporting. We can add these to our component template as well.

<input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel.sheet.macroEnabled.12" />
<button class="btn btn-default" (click)="ImportExcel()">Import</button>
<button class="btn btn-default" (click)="ExportExcel()">Export</button>

In our component class we can access our FlexGrid instance so we can pass it to our load or save function.

@ViewChild("flex") flex: wijmo.grid.FlexGrid;

Next in our component class lets add the Import and Export functions:
// Load function
ImportExcel(event){
let flex = this.flex;
let fileEle = <HTMLInputElement>$("#importFile")[0];
wijmo.grid.xlsx.FlexGridXlsxConverter.load(this.flex, fileEle.files[0], { includeColumnHeaders: true });
}
// Save Funciton
ExportExcel(event){
let flex = this.flex;
wijmo.grid.xlsx.FlexGridXlsxConverter.save(this.flex, { includeColumnHeaders: true, includeCellStyles: false }, "FlexGrid.xlsx");
}

If you are interesting in customizing the Exporting or Importing behavior you check out the API here.

Sample


In order to run this sample you need to have NodeJS installed. Navigate to the folder and run the following commands:
npm install
npm run lite

Click to download sample