Excel Exporter

    Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形式で生データ (配列) または IgxGridIgxTreeGrid および IgxHierarchicalGrid コンポーネントのデータをエクスポートできます。エクスポート機能は、IgxExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式では、フィルタリングやソートなどの機能が使用できます。

    Angular Excel Exporter の例

    使用方法

    IgniteUI Excel Exporter を使用するには、IgxExcelExporterService を app.module.ts ファイルにインポートし、providers 配列にサービスを追加します。

    // app.module.ts
    
    ...
    import { IgxExcelExporterService } from "igniteui-angular";
    
    @NgModule({
      providers: [ IgxExcelExporterService ]
    })
    
    export class AppModule {}
    
    Note

    Excel Exporter サービスは JSZip にピア依存関係があります。JSZip ライブラリは Excel Exporter の使用時にインストールしてください。

    エクスポート処理の開始は、コンポーネントのテンプレートでボタンのハンドラーを使用します。

    <button (click)="exportButtonHandler()">Export Data to Excel</button>
    

    エクスポーター サービスへのアクセスは、コンポーネントのコンストラクターで IgxExcelExporterService 型の引数を定義し、Angular フレームワークはサービスのインスタンスを提供します。データを MS Excel 形式でエクスポートするには、エクスポーター サービスの exportData メソッドを呼び出します。このメソッドで、エクスポートするデータは最初の引数です。2 番目の引数は IgxExcelExporterOptions 型で、エクスポート処理の構成を許可します。

    以下のコードはコンポーネントの typescript ファイルでエクスポート処理を実行します。

    // component.ts
    
    ...
    import { IgxExcelExporterService, IgxExcelExporterOptions } from "igniteui-angular";
    ...
    
    public localData = [
      { Name: "Eric Ridley", Age: "26" },
      { Name: "Alanis Brook", Age: "22" },
      { Name: "Jonathan Morris", Age: "23" }
    ];
    
    constructor(private excelExportService: IgxExcelExporterService) {
    }
    
    public exportButtonHandler() {
      this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("ExportedDataFile"));
    }
    

    正しく設定された場合、エクスポート ボタンが表示されます。ボタンが押されるとエクスポート処理をトリガーし、ブラウザーで "ExportedDataFile.csv" ファイルをダウンロードします。このファイルは localData 配列のデータを MS Excel 形式で含みます。

    IgxGrid データのエクスポート

    上記の例では、Excel Exporter サービスで利用可能なデータをすべてエクスポートしましたが、特定の行や列をエクスポートしない場合の実装は、各列で発生される columnExporting または各行で発生される rowExporting イベントを処理し、イベント引数オブジェクトの cancel プロパティを true に設定して各イベントをキャンセルします。

    以下の例では、ヘッダーが "Age" で、インデックスが 1 の場合、エクスポートから列を除外します。

    // component.ts
    
    this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
      if (args.header == "Age" && args.columnIndex == 1) {
          args.cancel = true;
      }
    });
    this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions("ExportedDataFile"));
    

    既知の制限

    Note

    JSZip のライブラリがの問題が原因で、大きな Excel ファイルのエクスポートが遅延する場合があります。問題が解決するまで、Excel エクスポーターの速度を上げるために、アプリケーションに setImmediate polyfill をインポートできます。

    npm install --save setimmediate
    
    import 'setimmediate';
    

    API リファレンス

    以下は、その他の Excel Exporter サービスの API です。

    Grid Excel エクスポーター:

    その他の使用されたコンポーネント:

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。