React Excel ライブラリの概要

Infragistics React Excel ライブラリは、workbook、Worksheet、IgrCell、Formula などの人気の Microsoft® Excel® スプレッドシートオブジェクトを使用してスプレッドシートデータで作業をすることができます。Infragistics React Excel ライブラリによって Excel スプレッドシートでアプリケーションのデータを表示するだけでなく、Excel からアプリケーションへのデータの転送も簡単になります。

React Excel ライブラリの例

依存関係

excel パッケージをインストールするときに core パッケージもインストールする必要があります。

npm install --save igniteui-react-core
npm install --save igniteui-react-excel

モジュールの要件

React Excel ライブラリを作成するには、以下のモジュールが必要です。

import { IgrExcelModule } from 'igniteui-react-excel';

IgrExcelModule.register();

モジュールの実装

Excel ライブラリには、アプリのバンドルサイズを制限するために使用できる 5 つのモジュールが含まれています。

IgxExcelCoreModule – オブジェクトモデルを含み、Excel の基盤となります。
IgxExcelFunctionsModule – Sum、Average、Min、Max、SumIfs、Ifs など、数式評価のほとんどのカスタム関数を含み、このモジュールがなくても数式が計算 ( “=SUM(A1:A5 などの数式を適用するなど) されてセルの Value を要求する場合は数式の解析で問題を発生しません。(注: 例外のスローではありません。数式の結果がエラーとなるため特定のエラーを表すオブジェクト)。
IgxExcelXlsModule – xls (および関連する) タイプファイルのロジックの読み込みと保存を含みます。これは Excel97to2003 関連の WorkbookFormats です。
IgxExcelXlsxModule – xlsx (および関連する) タイプファイルのロジックの読み込みと保存を含みます。これは Excel2007 関連および StrictOpenXml ANDWorkbookFormats です。
IgxExcelModule – 他の 4 つのモジュールの参照ですべての機能の読み込み/使用を可能にします。

サポートされるバージョンの Microsoft Excel

以下は Excel のサポートされるバージョンのリストです。

Microsoft Excel 97
Microsoft Excel 2000
Microsoft Excel 2002
Microsoft Excel 2003
Microsoft Excel 2007
Microsoft Excel 2010
Microsoft Excel 2013
Microsoft Excel 2016

[!Note] Excel ライブラリは Excel Binary Workbook (.xlsb) フォーマットを現時点ではサポートしていません。

ワークブックの読み込みと保存

注: Excel ライブラリモジュールをインポートした後、ワークブックを読み込みます。

次のコードスニペットでは、外部の ExcelUtility クラスを使用して workbook を保存およびロードしています。

workbook オブジェクトを読み込んで保存するために、実際の workbook の保存メソッドや static な Load メソッドを使用できます。

import { Workbook } from "igniteui-react-excel";
import { WorkbookSaveOptions } from "igniteui-react-excel";
import { WorkbookFormat } from "igniteui-react-excel";
import { ExcelUtility } from "ExcelUtility";

var workbook = ExcelUtility.load(file);
ExcelUtility.save(workbook, "fileName");

[!Note] For Angular

ヒープの管理

Excel Library のサイズに因り、ソースマップの生成を無効にすることを推奨します。

architect => build => options から serve の options で vendorSourceMap オプションを設定して angular.json を変更します。

...
    "architect": {
        "build": {
          "builder": "...",
          "options": {
            "vendorSourceMap": false,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
                  // ...
          },
              // ...
        },
        "serve": {
          "builder": "...",
          "options": {
            "vendorSourceMap": false,
            "browserTarget": "my-app:build"
          },
              // ...
        },
        // ...
      }

API リファレンス

Load
WorkbookInProcessRuntime
Worksheet
workbook