# npmを使う場合
npm install --save pdf-lib @pdf-lib/fontkit
 
# yarnを使う場合
yarn add pdf-lib @pdf-lib/fontkit

public
├── fonts
│   └── ipaexm.ttf

'use client';
import { PDFDocument } from 'pdf-lib';
import fontkit from '@pdf-lib/fontkit';
 
export default function PdfPrintButton() {
  const pdfPrint = async () => {
    // Create a new PDFDocument
    const pdfDoc = await PDFDocument.create();
 
    // テンプレートとして使用したいPDFを読み込む
    const url = '/a4_sample.pdf';
 
    const arrayBuffer = await fetch(url).then((res) => res.arrayBuffer());
    const doc = await PDFDocument.load(arrayBuffer);
 
    // fontの読み込みと埋め込み
    pdfDoc.registerFontkit(fontkit);
    const fontRaw = await fetch('/fonts/ipaexm.ttf').then((res) =>
      res.arrayBuffer(),
    );
    const fontIpamp = await pdfDoc.embedFont(new Uint8Array(fontRaw), {
      subset: true,
    });
 
    // テンプレートファイルの１ページ目をコピーして、新しいページを作成する
    const [_templatePage] = await pdfDoc.copyPages(doc, [0]);
    const _page1 = pdfDoc.addPage(_templatePage);
 
    // 書き込む文字列の位置、サイズ設定
    const targetText = '日本語 書き込み テスト PDF';
    const targetTextFontSize = 18;
    const targetTextXPosition = 200;
    const targetTextYPosition = 800;
 
    // 書き込む文字列の位置、サイズ、フォント、色を指定して書き込む
    // 日本語を書き込む場合にはフォントの設定が必要
    _page1.drawText(targetText, {
      x: targetTextXPosition,
      y: targetTextYPosition,
      size: targetTextFontSize,
      font: fontIpamp,
      // color: rgb(0, 0, 0)
    });
 
    const dataUri = await pdfDoc.saveAsBase64({
      dataUri: true,
      addDefaultPage: false,
    });
 
    // 書き込みしたPDFファイルをダウンロードするためのリンクを作成し、
    // そのリンクをクリックすることでダウンロードできるようにする
    const link = document.createElement('a');
    link.href = dataUri;
    link.download = 'サンプル.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
 
  return (
    <>
      <button
        className='bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2 rounded bg-blue-500 hover:bg-blue-700 mr-2'
        onClick={() => pdfPrint()}
      >
        <span>PDFダウンロード</span>
      </button>
    </>
  );
}

import PdfPrintButton from './components/PdfPrintButton';
 
export default function Home() {
  return (
    <main className='flex min-h-screen flex-col items-center justify-between p-24'>
      <div className='z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex'>
        <PdfPrintButton />
      </div>
    </main>
  );
}

yarn dev

Uncaught (in promise) Error: WinAnsi cannot encode "テ" (0x30c6)

'use client';
import { PDFDocument } from 'pdf-lib';
import fontkit from '@pdf-lib/fontkit';
 
export default function PdfPrintButton() {
  const pdfPrint = async () => {
 
    (...省略...)
 
    // fontの読み込みと埋め込み
    pdfDoc.registerFontkit(fontkit);
    const fontRaw = await fetch('/fonts/ipaexm.ttf').then((res) =>
      res.arrayBuffer(),
    );
    const fontIpamp = await pdfDoc.embedFont(new Uint8Array(fontRaw), {
      subset: true,
    });
 
    (...省略...)
 
  };
 

_page1.drawText('TEST PDF', {
  x: 290,
  y: 830,
  size: 18,
  // font: fontIpamp,
  // color: rgb(0, 0, 0)
});

 
(...省略...)
 
// fontの読み込みと埋め込み
pdfDoc.registerFontkit(fontkit);
const fontRaw = await fetch('/fonts/ipaexm.ttf').then((res) =>
  res.arrayBuffer(),
);
const fontIpamp = await pdfDoc.embedFont(new Uint8Array(fontRaw), {
  subset: true,
});
 
(...省略...)
 
const targetText = '中央揃えテスト';
const targetTextFontSize = 18;
const targetTextYPosition = 800;
 
// 使用するフォントでの文字列の長さを取得
const targetTextWidth = fontIpamp.widthOfTextAtSize(
  targetText,
  targetTextFontSize,
);
 
// 中央揃えするためのｘの座標を計算
const targetTextXPosition = page.getWidth() / 2 - targetTextWidth / 2;
 
_page1.drawText(targetText, {
  x: targetTextXPosition,
  y: targetTextYPosition,
  size: targetTextFontSize,
  font: fontIpamp,
  // color: rgb(0, 0, 0)
});

const pdfDoc = await PDFDocument.create();
 
// テンプレートとして使用したいPDFを読み込む
const url = '/a4_sample.pdf';
 
// 以下のように環境変数を使っている場合はその環境変数の値が間違っている可能性もあるかもしれません
// const url = `${process.env.NEXT_PUBLIC_URL}/a4_sample.pdf`;
 
const arrayBuffer = await fetch(url).then((res) => res.arrayBuffer());
const doc = await PDFDocument.load(arrayBuffer);