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

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

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

Angular Excel Exporter の例

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

Tree 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);

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

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

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

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

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

@ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent;

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

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

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

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

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

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

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

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

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

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

長いシートは、ヘッダー行が表示範囲外にスクロールされると読みにくくなる可能性があります。固定ヘッダーを有効にすると、ユーザーがデータをさらに下に探索している間、ワークシートの上部に 「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.treeGrid, new IgxExcelExporterOptions('ExportedDataFile'));

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

既知の制限

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

API リファレンス

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

• IgxExcelExporterService
• IgxExcelExporterOptions
• IgxPdfExporterService
• IgxPdfExporterOptions

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

• TreeGrid
• IgxTreeGridComponent スタイル

その他のリソース

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

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