CSV Exporter
Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生データ (配列) または IgxGrid からデータをエクスポートします。
エクスポート機能は IgxCsvExporterService
クラスにカプセル化されます。
Angular CSV Exporter の例
Ignite UI CSV Exporter をインスタンス化するには、IgxCsvExporterService
を app.module.ts ファイルにインポートし、サービスを providers
配列に追加します。
// app.module.ts
...
import { IgxCsvExporterService } from 'igniteui-angular';
// import { IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
providers: [ IgxCsvExporterService ]
})
export class AppModule {}
Note
v 12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。
エクスポート処理を開始するためにコンポーネントのテンプレートでボタンのハンドラーを使用できます。
<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';
// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from '@infragistics/igniteui-angular'; for licensed package
...
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 形式でエクスポートできます。IgxCsvExporterService
の export
メソッドを起動し、IgxGrid を最初の引数として渡します。
以下は例です。
<igx-grid #igxGrid1 [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid</button>
// component.ts
...
import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponent } from 'igniteui-angular';
// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponent } from '@infragistics/igniteui-angular'; for licensed package
...
@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 は複数のエクスポート形式タイプをサポートします。エクスポート形式は以下の方法で指定できます。
IgxCsvExporterOptions
オブジェクトのコンストラクターの 2 番目の引数として指定。IgxCsvExporterOptions
オブジェクトのfileType
プロパティを使用して指定。
別のエクスポート形式は別のファイル拡張子および区切り記号があります。以下の表はエクスポート形式を相対するファイル拡張子および区切り記号にマップします。
形式 | ファイルの拡張子 | デフォルトの区切り記号 |
---|---|---|
CsvFileTypes.CSV |
.csv | Comma |
CsvFileTypes.TAB |
.tab | Tab |
CsvFileTypes.TSV |
.tsv | Tab |
IgxCsvExporterOptions
オブジェクトの valueDelimiter
プロパティを使用してカスタム区切り記号を指定できます。
エクスポートされたコンテンツのカスタマイズ
上記の例では、CSV Exporter サービスで利用可能なデータをすべてエクスポートしましたが、特定の行や列をエクスポートしない場合の実装は、各列で発生される columnExporting
または各行で発生される rowExporting
イベントを処理し、イベント引数オブジェクトの cancel
プロパティを true
に設定して各イベントをキャンセルできます。
以下の例では、名前が "Age" で、インデックスが 1 の場合、エクスポートから列を除外します。
// component.ts
this.csvExportService.columnExporting.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 です。
使用したその他のコンポーネント: