Angular Grid Excel を Excel と PDF サービスへエクスポート

ユーザーがより深い分析のためのスプレッドシートを必要とする場合でも、すぐに共有できる洗練された PDF を必要とする場合でも、Ignite UI Exporter は IgxGrid から数秒で適切なファイルを提供するのに役立ちます。IgxExcelExporterService または IgxPdfExporterService をインジェクトし、それぞれの export/export メソッドを呼び出すと、コンポーネントがフィルターとソートの適用から出力形式の整形まで、残りの処理を行います。

以下のセクションでは、セットアップ、使用パターン、およびユーザーが好むファイル タイプに関係なく、すぐに使用できるデータを受け取れるように各エクスポートを調整するためのヒントについて説明します。

Angular Excel Exporter の例

このライブ例は、Grid の標準的な Excel および PDF エクスポート ワークフローを示しています。バインドされたデータ、2 つのエクスポート ボタン (Excel と PDF)、およびフィルタリングとソート状態が保持された結果の .xlsx ファイルと .pdf ファイルです。アプリケーションに組み込む前にエクスペリエンスをプレビューしたい関係者と共有してください。

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

エクスポーターをプロジェクトに取り込むには、数行のコードのみが必要です。次の手順に従うと、オンデマンドで Excel または PDF 出力を作成できる再利用可能なサービスが得られます。

1. ルート モジュールで IgxExcelExporterService および/または IgxPdfExporterService をインポートします。
2. 必要なエクスポーターをインジェクトし、ユーザーがファイルを要求したときにその export メソッドを呼び出します。

// component.ts
import { IgxExcelExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

...

private excelExportService = inject(IgxExcelExporterService);
private pdfExportService = inject(IgxPdfExporterService);

Note

v12.2.1 以降、IgxExcelExporterService はルートで提供され、providers 配列に登録する必要はありません。PDF Exporter は後のバージョンで導入され、追加の構成なしでインジェクタブル サービスとして利用できます。

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

<igx-grid #grid [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid to Excel</button>
<button (click)="exportPdfButtonHandler()">Export IgxGrid to PDF</button>

コンストラクターの依存関係として定義し、Angular にインスタンスを提供させることで、いずれかのエクスポーター サービスにアクセスできます。共有 export メソッドを呼び出すと、コンポーネントの状態、選択された行、および書式設定ルールを自動的に尊重しながらダウンロードが開始されます。

以下は、コンポーネントの TypeScript ファイルで両方のエクスポート プロセスを実行するコードです。

// component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';

@ViewChild('grid') public grid: IgxGridComponent;

private excelExportService = inject(IgxExcelExporterService);
private pdfExportService = inject(IgxPdfExporterService);

public exportButtonHandler() {
  this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
}

public exportPdfButtonHandler() {
  this.pdfExportService.export(this.grid, new IgxPdfExporterOptions('ExportedDataFile'));
}

配線が完了すると、それぞれのボタンを押すと、現在の Grid ビューが入力された ExportedDataFile.xlsx または ExportedDataFile.pdf という名前のファイルがダウンロードされます。顧客に優しいファイル名に置き換えたり、タイムスタンプを追加したり、成功トーストを表示したりして、ユーザーにエクスポートが完了したことを知らせることができます。

すべてのデータのエクスポート

大規模なリモート データセットは、多くの場合、ページごとまたはオンデマンドで読み込まれます。これは、ユーザーが [Export] をクリックしたときに Grid がすべてのレコードを使用できない可能性があることを意味します。完全なワークブックを保証するには、プロセスを開始する前に、完全なデータ コレクションでエクスポーターをハイドレートします。exportData ヘルパーはコンポーネントをバイパスし、プレーン オブジェクトに対して直接機能するため、スケジュールされたエクスポートまたは管理者専用ダウンロードに同じルーチンを再利用できます。

public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}

Tip

リモート データに PDF ダウンロードを提供する場合は、最初に完全なデータセットを取得してから export を呼び出して、ドキュメントがユーザーの期待を反映するようにすることを検討してください。

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

グループ化は、結果を共有する前に顧客セグメント、製品カテゴリ、または財務期間を要約する一般的な方法です。エクスポーターは、Grid に現在適用されている正確なグループ化階層を保持するため、受信者にはブラウザーで表示されるのと同じ内訳が表示されます。1 つ以上の列でグループ化し、エクスポートをトリガーするだけです。追加の構成は必要ありません。

エクスポートされたファイルにフラット データが必要な場合は、export を呼び出す前にグループ化をクリアするか、rowExporting イベントを処理して出力を再形成します。

例:

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

ダッシュボードは、多くの場合、複数列ヘッダーに依存してコンテキストを追加します。個々の月列の上に 「Q1/Q2/Q3」 バンドを配置することを考えてください。エクスポーターはこの構造をミラーリングするため、スプレッドシート ユーザーはグループ化ロジックをすぐに理解できます。ダウンストリーム ワークフローで単純な列名を優先する場合は、エクスポーター オプション ignoreMultiColumnHeaders フラグを true に反転すると、出力にはリーフ ヘッダーのみが含まれます。

Note

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

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

長いシートは、ヘッダー行が表示範囲外にスクロールされると読みにくくなる可能性があります。固定ヘッダーを有効にすると、ユーザーがデータをさらに下に探索している間、ワークシートの上部に 「Customer」 や 「Invoice Total」 などの重要なコンテキストが表示されたままになります。export を呼び出す前にエクスポーター オプション freezeHeaders フラグを true に切り替えると、サービスが残りを処理します。

public exportButtonHandler() {
    const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
    exporterOptions.freezeHeaders = true;
    this.excelExportService.export(this.grid, exporterOptions);
}

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

エクスポートするコンテンツのカスタマイズ

ほとんどのチームは、共有する前にエクスポートを調整します。内部使用列を非表示にしたり、ヘッダーの名前を変更したり、管理者にのみ適用される行をスキップしたりします。両方のエクスポーター サービスは、すべての行または列をインターセプトし、ファイルにどのように表示するかを決定できるイベントを公開します。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.grid, new IgxExcelExporterOptions('ExportedDataFile'));

Grid コンポーネントからデータをエクスポートする場合、サービスはソート、フィルタリング、集計、および非表示列を自動的に尊重するため、ファイルにはユーザーが現在表示しているものが反映されます。代わりに完全なデータセットが必要ですか? IgxExcelExporterOptions または IgxPdfExporterOptions の関連フラグを切り替えて、フィルターされた行、非表示列、またはカスタム メタデータを含めます。

既知の制限

エクスポートを本番ユーザーに配布する前に、次のプラットフォームの制約を確認して、アプリ内で期待を設定し、役立つガイダンスを提供できるようにしてください。

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

API リファレンス

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

• IgxExcelExporterService API
• IgxExcelExporterOptions API
• IgxPdfExporterService API
• IgxPdfExporterOptions API

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

• IgxGridComponent API
• IgxGridComponent スタイル

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。以下のリンクは、サンプル、コミュニティの回答、およびエンジニアリング チームにつながります。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)