FlexGrid Import Export (JSZip3)

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.

In this sample, click the "Browse" button to select an .xlsx file, then click the "Import" button to load the file into the FlexGrid.

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" ng-click="importExcel()">Import</button> <div class="checkbox"> <label> <input type="checkbox" ng-model="ctx.includeColumnHeader"> Include Column Header </label> </div>
$scope.importExcelAsync = function () { if ($('#importFile')[0].files[0]) { wijmo.grid.xlsx.FlexGridXlsxConverter.loadAsync($scope.ctx.flexGrid, $('#importFile')[0].files[0], { includeColumnHeaders: $scope.ctx.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" ng-click="exportExcel()">Export</button> <div class="checkbox"> <label> <inputtype="checkbox" ng-model="ctx.includeColumnHeader">Include Column Header </label> </div>
$scope.exportExcelAsync = function () { wijmo.grid.xlsx.FlexGridXlsxConverter.saveAsync($scope.ctx.flexGrid, { includeColumnHeaders: $scope.ctx.includeColumnHeader, includeCellStyles: false }, 'FlexGrid.xlsx'); };

Adding it to your application

To add Excel import or export support to your application, follow these steps:

  1. Add the wijmo.xlsx.js and wijmo.grid.xlsx.js files from this sample to your application.
  2. 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
  3. Add code from the basicController.exportExcelAsync function (on the JS tab in the Export code), which saves the export results to a local file.
  4. Add code from the basicController.importExcelAsync function (on the JS tab in the Import code), which reads an Excel file from the disk.