pdf-lib で日本語を出力する方法

1. はじめに

前回、pdf-lib を使ってみたで日本語が出力できないみたいなので、調べてみました。
単に、使用していた StandardFonts.Helvetica は日本語が出力できないみたいです。
MS Mincho フォント をダウンロード。
pdf.html や pdf.js と同じ階層に fonts フォルダを作成し、MSMINCHO.TTF を配置します。

2. 修正ソース

pdf.html に @pdf-lib/fontkit の CDN を追加します。

    <script src="https://cdn.jsdelivr.net/npm/@pdf-lib/fontkit@1.1.1/dist/fontkit.umd.min.js"></script>

PDF.js を修正します。

export async function createPdf() {
    const pdfDoc = await PDFDocument.create();

    pdfDoc.registerFontkit(fontkit)
    const url = './fonts/MSMINCHO.TTF';
    const fontBytes = await fetch(url).then((res) => res.arrayBuffer());
    const font = await pdfDoc.embedFont(fontBytes);

    const page = pdfDoc.addPage();
    const { width, height } = page.getSize();
    const fontSize = 30;

    page.drawText('あいうえお', {
        x: 50,
        y: height - 4 * fontSize,
        size: fontSize,
        font: font,
        color: rgb(0, 0.53, 0.71),
    });

    const pdfBytes = await pdfDoc.save();
    download(pdfBytes, 'output.pdf', 'application/pdf');
}

3. まとめ

これで、日本語が出力できました。
フォントデータを読み込んでいるので若干遅い気がしないでもないですが、日本語が出力できるので良しとします。
今回の記事も、Github Copilot が8割くらい書いてくれました。

A. 参考サイト

pdf-lib.jsというライブラリを利用すると、日本語フォントを埋め込んだPDFをブラウザ上で生成できる

B. 参考書籍