FlexGridのインポートとエクスポート (JSZip2)

このサンプルはFlexGridのデータをExcelファイルとの間でエクスポートまたはインポートする方法を紹介します。

備考:同期メソッドはJSZip 2で動作します。

FlexGridのデータをエクスポートするには、FlexGridXlsxConverter.saveメソッドにFlexGridコントロールのインスタンスを引き渡します。Excelファイルを生成することができ、ローカルファイルに保存したりサーバに送信することができます。

ExcelファイルデータをFlexGridにインポートするには、FlexGridXlsxConverter.load メソッドにFlexGridのインスタンスと対象のExcelファイルを引き渡します。

このサンプルでは、"ファイルを選択"ボタンをクリックしてXLSXファイルを選択し、"インポート"ボタンをクリックしてファイルをFlexGridにロードします。

読み込み

load関数は、FlexGridXlsxConverterクラスで実装され、Excelファイルのコンテンツを入力として受け取り、それをwijmo.xlsx.jsライブラリを使用して解析し、指定されたFlexGridインスタンスに解析データを挿入します。

<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.importExcel = function () { if ($('#importFile')[0].files[0]) { wijmo.grid.xlsx.FlexGridXlsxConverter.load($scope.ctx.flexGrid, $('#importFile')[0].files[0], { includeColumnHeaders: $scope.ctx.includeColumnHeader }); } }

保存

save関数はFlexGridXlsxConverterクラスで実装され、FlexGridインスタンスを入力として受け取り、そのデータと書式設定をwijmo.xlsx.jsライブラリを使用してExcel形式に変換します。
ファイル名が指定された場合は、コンテンツをローカルディスク上のファイルに保存します。
そうでない場合は、Excelファイルのコンテンツを含むWorkbookインスタンスを返します。

<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.exportExcel = function () { wijmo.grid.xlsx.FlexGridXlsxConverter.save($scope.ctx.flexGrid, { includeColumnHeaders: $scope.ctx.includeColumnHeader, includeCellStyles: false }, 'FlexGrid.xlsx'); };

アプリケーションに参照を追加

Excelインポートまたはエクスポートのサポートをアプリケーションに追加するには、次の手順を実行します。

  1. アプリケーションにwijmo.xlsx.jswijmo.grid.xlsx.jsファイルを追加してください。
  2. HTMLページで、次のファイルへの参照を追加します。
    • 以下のCDNにあるjszip.jsライブラリ:
      http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
    • wijmo.xlsx.js
    • wijmo.grid.xlsx.js
  3. エクスポート結果をローカルファイルに保存するbasicController.exportExcel関数(保存コードのJSタブ上)からコードを追加します。
  4. ディスクからExcelファイルを読み込むbasicController.importExcel関数(読み込みコードのJSタブ上)からコードを追加します。