PDF Exporter (PDF エクスポーター)

Ignite UI for Angular PDF Exporter サービスは、生データ配列や IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGrid などの高度な Grid コンポーネントを含むさまざまなソースからデータを PDF 形式でエクスポートする強力な機能を提供します。エクスポート機能は IgxPdfExporterService クラスにカプセル化されており、複数ページのドキュメントサポート、自動ページ区切り、カスタマイズ可能な書式設定オプションなどの包括的な機能を含む、PDF 形式へのシームレスなデータエクスポートを可能にします。

Angular PDF Exporter の例

使用方法

Ignite UI PDF Exporter の使用を開始するには、まず IgxPdfExporterService をコンポーネントにインポートします。

import { IgxPdfExporterService } from 'igniteui-angular/grids/core';

// import { IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

@Component({
  ...
})
export class AppComponent { ... }

エクスポートプロセスを開始するには、コンポーネントのテンプレートでボタンクリックハンドラーを使用できます。

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

inject 関数を使用して IgxPdfExporterService にアクセスできます。データを PDF 形式でエクスポートするには、エクスポーターサービスの exportData メソッドを起動します。このメソッドは、エクスポートするデータを最初の引数として受け取り、エクスポートプロセスを構成できる IgxPdfExporterOptions インスタンスを 2 番目の引数として受け取ります。

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

// component.ts

...
import { Component, inject, signal } from '@angular/core';
import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';

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

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

private pdfExportService = inject(IgxPdfExporterService);

public exportButtonHandler() {
  this.pdfExportService.exportData(this.localData, new IgxPdfExporterOptions('ExportedDataFile'));
}

正しく設定された場合、エクスポートボタンが表示されます。押されたとき、エクスポート処理をトリガーし、ブラウザーが「ExportedDataFile.pdf」ファイルをダウンロードします。このファイルは localData 配列のデータを PDF 形式で含みます。

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

上記の例では、PDF Exporter サービスはすべての使用可能なデータをエクスポートします。ただし、行または列全体のエクスポートをスキップしたい場合があります。これを実現するには、各列および/または各行に対してそれぞれ発生する columnExporting イベントおよび/または rowExporting イベントをサブスクライブできます。その後、イベント引数オブジェクトの cancel プロパティを true に設定することで、エクスポートをキャンセルできます。

以下の例では、ヘッダーが「Age」でインデックスが 1 の列をエクスポートから除外します。

// component.ts

this.pdfExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == 'Age' && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.pdfExportService.export(this.igxGrid1, new IgxPdfExporterOptions('ExportedDataFile'));

PDF エクスポートオプション

IgxPdfExporterOptions クラスは、PDF エクスポートをカスタマイズするためのいくつかのプロパティを提供します。

pageOrientation: ページの向き (portrait または landscape) を指定します。デフォルトは landscape です。
pageSize: ページサイズ (a3、a4、a5、letter、legal など) を指定します。デフォルトは a4 です。
showTableBorders: テーブルの境界線を表示するかどうかを決定します。デフォルトは true です。
fontSize: テーブルコンテンツのフォントサイズを設定します。デフォルトは 10 です。

次の例は、これらのオプションを構成する方法を示しています。

// component.ts

public exportButtonHandler() {
  const options = new IgxPdfExporterOptions('ExportedDataFile');
  options.pageOrientation = 'portrait';
  options.pageSize = 'letter';
  options.showTableBorders = true;
  options.fontSize = 12;

  this.pdfExportService.exportData(this.localData, options);
}

既知の制限

制限	説明
幅の広い PDF レイアウト	非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に明示的な列幅を適用するか、優先度の低いフィールドを非表示にしてください。

API リファレンス

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

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

その他のリソース

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