PDF Exporter (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 イベントをサブスクライブできます。その後、イベント引数オブジェクトの IRowExportingEventArgs.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 です。
• customFont: Unicode 文字サポート用のカスタム TrueType フォント (TTF) を指定します。ラテン文字以外の文字を含むデータをエクスポートする場合に必要です。

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

// 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);
}

Unicode サポート用のカスタム フォント構成

デフォルトでは、PDF エクスポーターは組み込みの Helvetica フォントを使用します。このフォントは基本的なラテン文字のみをサポートしています。データにラテン文字以外の文字 (キリル文字、中国語、日本語、アラビア語、ヘブライ語、特殊記号など) が含まれている場合は、customFont プロパティを使用してカスタム TrueType フォント (TTF) を提供する必要があります。

フォント データは、TTF ファイルの内容を Base64 エンコードした文字列として提供する必要があります。ヘッダーのスタイル設定用に、別途太字バリアントを提供することもできます。

TTF ファイルを Base64 に変換

TTF ファイルを Base64 に変換するには、Node.js を使用します:

const fs = require('fs');
const fontData = fs.readFileSync('path/to/font.ttf');
const base64 = fontData.toString('base64');
fs.writeFileSync('font-base64.ts', `export const MY_FONT = '${base64}';`);

または、オンラインの Base64 エンコーダー ツールを使用して TTF ファイルを変換することもできます。

例: 基本的なカスタム フォントの使用方法

// fonts/noto-sans.ts
export const NOTO_SANS_REGULAR = 'AAEAAAATAQAABAAwR0...[base64-encoded font data]...';

// component.ts
import { NOTO_SANS_REGULAR } from './fonts/noto-sans';

public exportButtonHandler() {
  const options = new IgxPdfExporterOptions('ExportedDataFile');
  options.customFont = {
    name: 'NotoSans',
    data: NOTO_SANS_REGULAR
  };

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

例: 太字バリアント付きカスタム フォント

// fonts/noto-sans.ts
export const NOTO_SANS_REGULAR = 'AAEAAAATAQAABAAwR0...[base64-encoded regular font]...';
export const NOTO_SANS_BOLD = 'BBFAAAAUBQAACAAxS1...[base64-encoded bold font]...';

// component.ts
import { NOTO_SANS_REGULAR, NOTO_SANS_BOLD } from './fonts/noto-sans';

public exportButtonHandler() {
  const options = new IgxPdfExporterOptions('ExportedDataFile');
  options.customFont = {
    name: 'NotoSans',
    data: NOTO_SANS_REGULAR,
    bold: {
      name: 'NotoSans-Bold',
      data: NOTO_SANS_BOLD
    }
  };

  this.pdfExportService.export(this.igxGrid1, options);
}

Unicode サポートの推奨フォント

以下のフォントは優れた Unicode カバレッジを提供します:

• Noto Sans: ほとんどの Unicode スクリプトをカバー - Google Fonts
• Arial Unicode MS: 包括的な Unicode 文字サポート
• Source Han Sans: 優れた CJK (中国語、日本語、韓国語) サポート

デモ

既知の制限

API リファレンス

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

• IgxPdfExporterService
• IgxPdfExporterOptions

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

• Grid
• IgxGridComponent スタイル

その他のリソース

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

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