The sample demonstrates how to export or import FlexGrid content to/from an Excel(.xlsx)
file with the save/load methods of the FlexGridXlsxConverter class.
Note: Sychronous methods work with JSZip 2.
To export FlexGrid content, pass the FlexGrid instance to the FlexGridXlsxConverter.save 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.load method.
Load
The load function, implemented in the FlexGridXlsxConverter class,
takes the 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)="importExcel()">Import</button>
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="ctx.includeColumnHeader"> Include Column Header
</label>
</div>
importExcel() {
var fileInput = <HTMLInputElement>$('#importFile')[0];
if (fileInput.files[0]) {
wijmo.grid.xlsx.FlexGridXlsxConverter.load(this.flexGrid, fileInput.files[0], { includeColumnHeaders: this.includeColumnHeader });
}
}
Save
The save 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)="exportExcel()">Export</button>
<div class="checkbox">
<label>
<inputtype="checkbox" [(ngModel)]="includeColumnHeader">Include Column Header
</label>
</div>
exportExcel() {
wijmo.grid.xlsx.FlexGridXlsxConverter.save(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/2.5.0/jszip.min.js
- wijmo.xlsx.js
- wijmo.grid.xlsx.js
-
Add code from the FlexGridImportExportCmp.exportExcel function (on the JS tab in
the Export code), which saves the export results to a local file.
-
Add code from the FlexGridImportExportCmp.importExcel function (on the JS tab in
the Import code), which reads an Excel file from the disk.
