Client-side Excel Importing and Exporting in Angular

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.

How to add client-side importing and exporting functionality to your Excel file

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

// 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 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;

Adding import and export functions

Next in our component class, let's add the import and export functions:

// Load function  
ImportExcel(event){  
        let flex = this.flex;  
        let fileEle = $("#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 can check out the API here.

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