The sample demonstrates how to export or import FlexGrid content to/from an Excel(.xlsx) file
asynchronously with the saveAsync/loadAsync methods of the FlexGridXlsxConverter class.
Note: Asychronous methods work with JSZip 3.
To export FlexGrid content, pass the FlexGrid instance to the FlexGridXlsxConverter.saveAsync method.
This generates the Excel file content, which can be saved to a local file or sent to a server.
To populate FlexGrid with data from an Excel file, pass the FlexGrid instance and the Excel file content
to the FlexGridXlsxConverter.loadAsync method.
Load
The loadAsync function, implemented in the FlexGridXlsxConverter class,
takes content of an Excel file as input, parses it using the wijmo.xlsx.js library,
and populates the specified FlexGrid instance with the parsed data.
<input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
<button class="btn btn-default" (click)="importExcelAsync()">Import</button>
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="ctx.includeColumnHeader"> Include Column Header
</label>
</div>
importExcelAsync() {
var fileInput = <HTMLInputElement>$('#importFile')[0];
if (fileInput.files[0]) {
wijmo.grid.xlsx.FlexGridXlsxConverter.loadAsync(this.flexGrid, fileInput.files[0], { includeColumnHeaders: this.includeColumnHeader });
}
}
Save
The saveAsync function, implemented in the FlexGridXlsxConverter class,
takes a FlexGrid instance as input, converts its data and formatting
to Excel format using the wijmo.xlsx.js library.
If the file name is specified, it will save it to a file on the local disk.
Otherwise, it returns a Workbook instance containing the content for Excel file.
<button class="btn btn-default" (click)="exportExcelAsync()">Export</button>
<div class="checkbox">
<label>
<inputtype="checkbox" [(ngModel)]="includeColumnHeader">Include Column Header
</label>
</div>
exportExcel() {
wijmo.grid.xlsx.FlexGridXlsxConverter.saveAsync(this.flexGrid, { includeColumnHeaders: this.includeColumnHeader, includeCellStyles: false }, 'FlexGrid.xlsx');
}
Adding it to your application
To add Excel import or export support to your application, follow these steps:
-
Add the wijmo.xlsx.js and wijmo.grid.xlsx.js files from this sample
to your application.
-
In the HTML page, add references to the following files.
-
The jszip.js library that you can find in the following CDN:
http://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
- wijmo.xlsx.js
- wijmo.grid.xlsx.js
-
Add code from the basicController.exportExcelAsync function (on the JS tab in
the Export code), which saves the export results to a local file.
-
Add code from the basicController.importExcelAsync function (on the JS tab in
the Import code), which reads an Excel file from the disk.
