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"
},
// ...
},
// ...
}
>