Reactで、画面の内容をjsPDFでPDFにして保存する方法

npm i jspdf html2canvas

// pdf.ts
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';

// A4 縦（mm）と、四辺の余白
const PAGE_W = 210;
const PAGE_H = 297;
const MARGIN = 10;

export type ImagePdfOptions = {
  scale?: number; // html2canvas で描くときの倍率
  format?: 'JPEG' | 'PNG'; // PDF に入れる画像の形式
  keepSelector?: string; // ページの境目で切らない要素
};

// 要素を画像にして、A4 のページに上から順に貼る
export async function elementToPdf(
  el: HTMLElement,
  { scale = 2, format = 'JPEG', keepSelector }: ImagePdfOptions = {},
): Promise<jsPDF> {
  const canvas = await html2canvas(el, { scale, backgroundColor: '#ffffff', logging: false });
  const doc = new jsPDF({ unit: 'mm', format: 'a4' });

  const contentW = PAGE_W - MARGIN * 2;
  const pxPerMm = canvas.width / contentW;
  const pagePx = Math.floor((PAGE_H - MARGIN * 2) * pxPerMm);
  const cuts = pageCuts(el, canvas.height, pagePx, canvas.width / el.offsetWidth, keepSelector);

  let top = 0;
  cuts.forEach((bottom, i) => {
    // 1ページ分を別の canvas に切り出す
    const slice = document.createElement('canvas');
    slice.width = canvas.width;
    slice.height = bottom - top;
    slice
      .getContext('2d')!
      .drawImage(canvas, 0, top, canvas.width, slice.height, 0, 0, canvas.width, slice.height);
    if (i > 0) doc.addPage();
    doc.addImage(slice, format, MARGIN, MARGIN, contentW, slice.height / pxPerMm);
    top = bottom;
  });
  return doc;
}

// pdf.ts（続き）
// 各ページの下端（canvas の px）を決める。keepSelector の要素は途中で切らない
function pageCuts(
  el: HTMLElement,
  totalPx: number,
  pagePx: number,
  ratio: number,
  keepSelector?: string,
): number[] {
  const elTop = el.getBoundingClientRect().top;
  const bottoms = keepSelector
    ? [...el.querySelectorAll(keepSelector)].map((b) =>
        Math.round((b.getBoundingClientRect().bottom - elTop) * ratio),
      )
    : [];
  const cuts: number[] = [];
  let top = 0;
  while (totalPx - top > pagePx) {
    const limit = top + pagePx;
    const fits = bottoms.filter((b) => b > top && b <= limit);
    const cut = fits.length > 0 ? Math.max(...fits) : limit;
    cuts.push(cut);
    top = cut;
  }
  cuts.push(totalPx);
  return cuts;
}

// ReportPdf.tsx
import { useRef, useState } from 'react';
import { elementToPdf, textToPdf } from './pdf';

export type Row = { day: string; task: string; hours: number };

export function ReportPdf({ rows }: { rows: Row[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState('');

  async function saveAsImage() {
    if (!ref.current) return;
    setBusy(true);
    try {
      const doc = await elementToPdf(ref.current, { keepSelector: 'tr, h2' });
      doc.save('report.pdf');
      setMessage(`report.pdf を保存しました（${doc.getNumberOfPages()}ページ）`);
    } catch (e) {
      setMessage(`失敗しました：${String(e)}`);
    } finally {
      setBusy(false);
    }
  }

  async function saveAsText() {
    setBusy(true);
    try {
      const lines = rows.map((r) => `${r.day}　${r.task}　${r.hours}時間`);
      const doc = await textToPdf('作業の記録', lines, '/fonts/ipag.ttf');
      doc.save('report-text.pdf');
      setMessage(`report-text.pdf を保存しました（${doc.getNumberOfPages()}ページ）`);
    } catch (e) {
      setMessage(`失敗しました：${String(e)}`);
    } finally {
      setBusy(false);
    }
  }

  const total = rows.reduce((sum, r) => sum + r.hours, 0);

  return (
    <div>
      <div ref={ref} className="report">
        <h2>作業の記録</h2>
        <table>
          <thead>
            <tr><th>日付</th><th>内容</th><th>時間</th></tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}><td>{r.day}</td><td>{r.task}</td><td>{r.hours}</td></tr>
            ))}
          </tbody>
          <tfoot>
            <tr><td colSpan={2}>合計</td><td>{total}</td></tr>
          </tfoot>
        </table>
      </div>
      <button disabled={busy} onClick={saveAsImage}>画面のとおり PDF にする</button>
      <button disabled={busy} onClick={saveAsText}>文字の PDF にする</button>
      <p role="status">{message}</p>
    </div>
  );
}

// pdf.ts（続き）
// TTF ファイルを読み込んで、jsPDF に渡せる文字列（バイナリ文字列）にする
let fontData: Promise<string> | null = null;
function loadFont(url: string): Promise<string> {
  fontData ??= fetch(url)
    .then((res) => {
      if (!res.ok) throw new Error(`フォントを読み込めません（${res.status}）`);
      return res.arrayBuffer();
    })
    .then((buf) => {
      const bytes = new Uint8Array(buf);
      let s = '';
      for (let i = 0; i < bytes.length; i += 0x8000) {
        s += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
      }
      return s;
    })
    .catch((e) => {
      fontData = null; // 失敗したときは、次に呼ばれたら読み込み直す
      throw e;
    });
  return fontData;
}

// 文字を PDF の文字として書く。fontUrl を渡さないと、jsPDF の標準フォントになる
export async function textToPdf(
  title: string,
  lines: string[],
  fontUrl?: string,
): Promise<jsPDF> {
  const doc = new jsPDF({ unit: 'mm', format: 'a4' });
  if (fontUrl) {
    doc.addFileToVFS('ipag.ttf', await loadFont(fontUrl));
    doc.addFont('ipag.ttf', 'IPAGothic', 'normal');
    doc.setFont('IPAGothic');
  }
  doc.setFontSize(16);
  doc.text(title, MARGIN, 20);
  doc.setFontSize(11);
  let y = 32;
  for (const line of lines) {
    if (y > PAGE_H - MARGIN) {
      doc.addPage();
      y = 20;
    }
    doc.text(line, MARGIN, y);
    y += 7;
  }
  return doc;
}