概要

　jsPDF を使って日本語で PDF ファイルを生成したかったが、日本語対応はしていないため、.ttf ファイルを使用する。

PDF の 14 の標準フォントは、ASCII コードページに限定されています。UTF-8 を使用する場合は、必要なグリフを提供するカスタムフォントを統合する必要があります。jsPDF は .ttf ファイルをサポートしています。

.ttf ファイルは Google Fonts からダウンロードする。今回使用する Noto Serif Japanese の .ttf ファイルは以下からダウンロードできる（Download all(1)をクリックする）。

　README にある通り以下に .ttf ファイルをアップロードする。

jsPDF にフォントを追加するには、 /fontconverter/fontconverter.htmlのフォントコンバーターを使用します。フォントコンバーターは、提供された ttf ファイルの内容を base64 でエンコードされた文字列として含み、jsPDF 用の追加コードを含む js ファイルを作成します。生成された js ファイルをプロジェクトに追加するだけです。これで、コードで setFont メソッドを使用して、UTF-8 でエンコードされたテキストを書き込む準備が整います。

アップロード後、以下のようなファイルがダウンロードされる。

import { jsPDF } from "jspdf"
var font = 'AAEAAAAXAQAABABwQkF...'
var callAddFont = function () {
this.addFileToVFS('NotoSerifJP-VariableFont_wght-normal.ttf', font);
this.addFont('NotoSerifJP-VariableFont_wght-normal.ttf', 'NotoSerifJP-VariableFont_wght', 'normal');
};
jsPDF.API.events.push(['addFonts', callAddFont])

しかしサイズが大きいのでこれを GitHub で管理したくない。

リモートにある .ttf ファイルを読み込む

サンプルコード

  const handleExportPdf = async () => {
    const doc = new jsPdf();

    // リモートにある .ttf ファイル を読み込む
    const res = await fetch(
      'https://sample-bucket.s3.ap-northeast-1.amazonaws.com/fonts/NotoSerifJP-VariableFont_wght.ttf'
    );
    const fontBlob = await res.blob();

    // Blob の内容を読み込む
    const reader = new FileReader();
    reader.readAsDataURL(fontBlob);

    // Blob 読み込み完了後の処理
    reader.onloadend = function () {
      const result = reader?.result;
      if (result && typeof result === 'string') {
        // Base64 部分を取得
        const base64data = result.split(',')[1];

        // フォント設定
        doc.addFileToVFS('NotoSerifJP.ttf', base64data);
        doc.addFont('NotoSerifJP.ttf', 'NotoSerifJP', 'normal');
        doc.setFont('NotoSerifJP');

        // PDFにテキストを書き込む
        doc.text(
          'リモートの .ttf ファイルから jsPDF にフォントを設定します。',
          20,
          40
        );

        // PDFを保存
        doc.save('sample.pdf');
      }
    };

実行後

解説

リモートファイルの読み込み
- S3 バケットに保存した .ttf ファイルを fetch で取得し、レスポンスから Blog オブジェクトを取得する

// リモートにある .ttf ファイル を読み込む
const res = await fetch(
  'https://sample-bucket.s3.ap-northeast-1.amazonaws.com/fonts/NotoSerifJP-VariableFont_wght.ttf'
);
const fontBlob = await res.blob();

Blog オブジェクトから Base64 コードを読み込む

// Blob の内容を読み込む
const reader = new FileReader();
reader.readAsDataURL(fontBlob);

Base64 コードを jsPDF に渡す

// Blob 読み込み完了後の処理
reader.onloadend = function () {
  const result = reader?.result;

  if (result && typeof result === 'string') {
    // Base64部分を取得
    const base64data = result.split(',')[1];

    // フォント設定
    doc.addFileToVFS('NotoSerifJP.ttf', base64data);
    doc.addFont('NotoSerifJP.ttf', 'NotoSerifJP', 'normal');
    doc.setFont('NotoSerifJP');
    ...

参考