Web Components Grid エクスポート

Ignite UI for Web Components Grid は、Grid Toolbar Exporter コンポーネントを介してデータエクスポート機能を提供します。表示されたデータを Excel、CSV、または PDF 形式でエクスポートできます。Excel エクスポートは、フィルタリングやソートなどの機能をサポートする MS Excel テーブル形式を使用します。エクスポートを有効にするには、IgcGridToolbarExporterComponent をグリッドのツールバー内に配置します。デフォルトでは、すべてのエクスポート形式が有効になっています。

Web Components エクスポートの例

グループ化されたデータのエクスポート

グループ化されたデータをエクスポートするには、IgcGridComponent を 1 つ以上の列でグループ化する必要があります。ブラウザーは、選択した列でグループ化された Excel 形式の IgcGridComponent コンポーネントからのデータを含む「ExportedDataFile.xlsx」という名前のファイルをダウンロードします。トピックのはじめに例があります。

複数列ヘッダーグリッドのエクスポート

定義された複数列ヘッダーを使用して IgcGridComponent をエクスポートできます。すべてのヘッダーは、IgcGridComponent に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、ExporterOption IgnoreMultiColumnHeaders を true に設定できます。

[!Note] Excel テーブルは複数の列ヘッダーをサポートしていないため、エクスポートされた IgcGridComponent はテーブルとしてフォーマットされません。

[!Note] IgcGridToolbarExporterComponent は、エンドユーザーが使用できるエクスポート形式を制御する方法も示すように構成されています。ツールバーのエクスポーターオプションを使用して、Excel、CSV、または PDF ボタンを切り替えます。

export-excel、export-csv、export-pdf

固定された列ヘッダーを使用してグリッドをエクスポートする

デフォルトでは、Excel エクスポーターサービスは、スクロール可能な (固定されていない) 列ヘッダーを使用してグリッドをエクスポートします。多くのシナリオでは、エクスポートされた Excel ファイルの上部にすべてのヘッダーを固定し、ユーザーがレコードをスクロールしても常に表示されるようにしたい場合があります。これを実現するには、ExporterOption FreezeHeaders を true に設定します。

[!Note] PDF エクスポートには、ドキュメントの上部に列ヘッダー行が自動的に含まれるため、読者がファイルを開いたり印刷したりしても同じコンテキストが保持されます。

constructor() {
  var gridToolbarExporter1 = document.getElementById('gridToolbarExporter1') as IgcGridToolbarExporterComponent;
  gridToolbarExporter1.addEventListener("exportStarted", this.webGridExportEventFreezeHeaders);
}

public webGridExportEventFreezeHeaders(args: any): void {
  args.detail.options.freezeHeaders = true;
}

既知の問題と制限

制限	説明
ワークシートの最大サイズ	Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。
セルのスタイル設定	Excel エクスポーターサービスは、セルコンポーネントに適用されたカスタムスタイルのエクスポートをサポートしていません。このようなシナリオでは、Excel ライブラリを使用することをお勧めします。
幅の広い PDF レイアウト	非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。

API リファレンス

IgcGridComponent

その他のリソース

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