pdf-lib：カスタムフォントを埋め込む

皆さん、こんにちは。

今回は「pdf-lib：カスタムフォントを埋め込む」について紹介させていただきます。

pdf-libでは、標準フォント（Helvetica、Times Roman、Courierなど）以外の独自フォント（カスタムフォント）を使用するために、フォントファイル（.ttf や .otf など）を読み込み、埋め込む必要があります。以下では、ブラウザ環境での使用例と Node.js 環境での使用例を含め、具体的な手順を詳しく解説します。

カスタムフォントを埋め込む基本手順

1. フォントファイルの用意:
   使用したいフォントファイル（例: MyCustomFont.ttf）をプロジェクト内に用意します。もし日本語フォントを利用する場合、文字セットをサポートしているフォント（例: Noto Sans CJK や IPAexフォントなど）を選びます。

2. フォントファイルの読み込み:
   ブラウザの場合は、fetch を使って ArrayBuffer として読み込みます。Node.js では、fs モジュールでファイルを読み込むことができます。

3. PDFDocument へのフォントの埋め込み:
   PDFDocument のインスタンスに対して、embedFont メソッドを使って読み込んだフォントデータを埋め込みます。これにより、描画時にカスタムフォントが利用できるようになります。

4. テキスト描画時にフォントを指定:
   page.drawText のオプションに font: customFont を渡すことで、カスタムフォントでテキストを描画できます。

ブラウザ環境での実装例

import { PDFDocument, rgb } from 'pdf-lib';

async function createPdfWithCustomFont() {
  // PDFドキュメントの作成
  const pdfDoc = await PDFDocument.create();

  // ページの追加
  const page = pdfDoc.addPage();
  const { width, height } = page.getSize();

  // フォントファイルの読み込み（例: public/fonts/MyCustomFont.ttf）
  const fontUrl = '/fonts/MyCustomFont.ttf';
  const fontBytes = await fetch(fontUrl).then((res) => res.arrayBuffer());

  // カスタムフォントの埋め込み
  const customFont = await pdfDoc.embedFont(fontBytes);

  // テキスト描画
  const fontSize = 24;
  page.drawText('こんにちは、世界！', {
    x: 50,
    y: height - 4 * fontSize,
    size: fontSize,
    font: customFont,
    color: rgb(0, 0.53, 0.71)
  });

  // PDFバイトデータの取得（Blob に変換してダウンロード等が可能）
  const pdfBytes = await pdfDoc.save();

  // ブラウザで PDF を表示またはダウンロードするための処理例
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  window.open(url);
}

createPdfWithCustomFont();

補足ポイント

• ファイルパス:
  ブラウザ環境の場合、フォントファイルは正しい URL パスに配置してください。たとえば、public フォルダに配置し、/fonts/MyCustomFont.ttf として参照する形になります。

• エラーハンドリング:
  実際のアプリケーションでは、fetch の失敗やファイルが存在しない場合に備えてエラーハンドリングを追加することをお勧めします。

Node.js 環境での実装例

Node.js 環境で PDF を作成する場合は、fs モジュールでフォントファイルを読み込み、同様の手順でカスタムフォントを埋め込みます。

const fs = require('fs');
const { PDFDocument, rgb } = require('pdf-lib');

async function createPdfWithCustomFont() {
  // PDFドキュメントの作成
  const pdfDoc = await PDFDocument.create();

  // ページの追加
  const page = pdfDoc.addPage([600, 400]);

  // フォントファイルの読み込み
  const fontBytes = fs.readFileSync('path/to/MyCustomFont.ttf');

  // カスタムフォントの埋め込み
  const customFont = await pdfDoc.embedFont(fontBytes);

  // テキスト描画
  const fontSize = 24;
  page.drawText('こんにちは、世界！', {
    x: 50,
    y: 350,
    size: fontSize,
    font: customFont,
    color: rgb(0, 0, 0)
  });

  // PDFバイトデータの取得とファイルへの書き出し
  const pdfBytes = await pdfDoc.save();
  fs.writeFileSync('output.pdf', pdfBytes);
}

createPdfWithCustomFont();

pdf-lib の場合、組み込みの標準フォントは日本語をサポートしていません。従って、日本語を扱う場合は、必ず日本語の文字が含まれるカスタムフォントを埋め込む必要があります。例えば、Google の Noto Sans CJK や IPAexフォントを使用するとよいでしょう。同様の手順でフォントファイルを読み込み、埋め込み、テキスト描画時に指定します。

まとめ

pdf-lib で別のフォントを指定する際は、以下の流れになります：

1. カスタムフォントファイルを用意し、ArrayBuffer（もしくは Buffer）の形式で読み込む
2. pdfDoc.embedFont メソッドを使って PDF にフォントを埋め込む
3. 描画時に font プロパティで埋め込んだフォントを指定する

これにより、標準フォント以外の任意のフォントを用いて PDF を作成でき、デザインの自由度が大いに向上します。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。