CSV Exporter

Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生データ (配列) または IgxGrid からデータをエクスポートします。 エクスポート機能は IgxCsvExporterService クラスにカプセル化されます。

CSV Exporter デモ

Ignite UI CSV Exporter をインスタンス化するには、IgxCsvExporterService を app.module.ts ファイルにインポートし、サービスを providers 配列に追加します。

// app.module.ts

...
import { IgxCsvExporterService } from "igniteui-angular/services/index";

@NgModule({
  providers: [ IgxCsvExporterService ]
})

export class AppModule {}

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

エクスポート処理を開始するためにコンポーネントのテンプレートでボタンのハンドラーを使用できます。

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

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

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

// component.ts

...
import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from "igniteui-angular/services/index";
...

public localData = [
  { Name: "Eric Ridley", Age: "26" },
  { Name: "Alanis Brook", Age: "22" },
  { Name: "Jonathan Morris", Age: "23" }
];

constructor(private csvExportService: IgxCsvExporterService) {
}

public exportButtonHandler() {
  this.csvExportService.exportData(this.localData, new IgxCsvExporterOptions("ExportedDataFile"), CsvFileTypes.CSV);
}

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

IgxGrid のデータのエクスポート

CSV Exporter サービスも IgxGrid からのデータを CSV 形式でエクスポートできます。IgxCsvExporterServiceexport メソッドを起動し、IgxGrid を最初の引数として渡します。

以下は例です。

<igx-grid #igxGrid1 [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid</button>
// component.ts

...
import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from "igniteui-angular/services/index";
import { IgxGridComponent } from "igniteui-angular/grid/grid.component";
...

@ViewChild("igxGrid1") public igxGrid1: IgxGridComponent;

public localData = [
  { Name: "Eric Ridley", Age: "26" },
  { Name: "Alanis Brook", Age: "22" },
  { Name: "Jonathan Morris", Age: "23" }
];

constructor(private csvExportService: IgxCsvExporterService) {
}

public exportButtonHandler() {
  this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions("ExportedDataFile", CsvFileTypes.CSV));
}

エクスポート形式のカスタマイズ

CSV Exporter は複数のエクスポート形式タイプをサポートします。エクスポート形式は以下の方法で指定できます。

別のエクスポート形式は別のファイル拡張子および区切り記号があります。以下の表はエクスポート形式を相対するファイル拡張子および区切り記号にマップします。

形式 ファイルの拡張子 デフォルトの区切り記号
CsvFileTypes.CSV .csv Comma
CsvFileTypes.TAB .tab Tab
CsvFileTypes.TSV .tsv Tab

IgxCsvExporterOptions オブジェクトの valueDelimiter プロパティを使用してカスタム区切り記号を指定できます。

エクスポートされたコンテンツのカスタマイズ

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

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

// component.ts

this.csvExportService.onColumnExport.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == "Age" && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions("ExportedDataFile"));

IgxGrid からのデータのエクスポートで、エクスポート処理は行フィルタリングおよび列の非表示などの機能に応じてグリッドで表示されるデータのみをエクスポートします。IgxCsvExporterOptions オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。このプロパティは以下の表で説明します。

API まとめ

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

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

追加のリソース

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