Reactで、印刷用のレイアウトを用意して印刷する方法

import { useState } from 'react';
import { usePrintOnly } from './usePrintOnly';

type Item = { id: number; name: string; price: number };
const items: Item[] = Array.from({ length: 51 }, (_, i) => ({
  id: i + 1,
  name: `部品 ${String(i + 1).padStart(2, '0')}`,
  price: 1200 + i * 150,
}));
const yen = (n: number) => `${n.toLocaleString('ja-JP')} 円`;

export function App() {
  const [to, setTo] = useState('〇〇 様');
  const [qty, setQty] = useState<Record<number, number>>({});
  const total = items.reduce((sum, item) => sum + item.price * (qty[item.id] ?? 1), 0);
  const { printOnly, portal } = usePrintOnly();

  return (
    <div className="layout">
      <header className="app-header no-print">
        <span>見積もりツール</span>
        <button onClick={() => window.print()}>見積書を印刷</button>
        <button onClick={() => printOnly(<Slip to={to} total={total} />)}>受付票だけ印刷</button>
      </header>
      <nav className="side-nav no-print">
        <a href="#">見積もり一覧</a>
        <a href="#">設定</a>
      </nav>
      <main className="sheet">
        <h1>見積書</h1>
        <p className="to">
          <input className="screen-only" value={to} onChange={(e) => setTo(e.target.value)} aria-label="宛名" />
          <span className="print-only">{to}</span>
        </p>
        <table>
          <thead>
            <tr><th>No.</th><th>品名</th><th>単価</th><th>数量</th><th>金額</th></tr>
          </thead>
          <tbody>
            {items.map((item) => {
              const n = qty[item.id] ?? 1;
              return (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{yen(item.price)}</td>
                  <td>
                    <input className="screen-only" type="number" min={0} value={n} aria-label={`${item.name}の数量`}
                      onChange={(e) => setQty({ ...qty, [item.id]: Number(e.target.value) })} />
                    <span className="print-only">{n}</span>
                  </td>
                  <td>{yen(item.price * n)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <section className="summary">
          <p>合計 <strong>{yen(total)}</strong></p>
          <p>有効期限：発行日から30日</p>
          <p>お支払い方法は<a href="https://example.com/payment">案内ページ</a>をご覧ください。</p>
        </section>
      </main>
      {portal}
    </div>
  );
}

function Slip({ to, total }: { to: string; total: number }) {
  return (
    <div className="slip">
      <h2>受付票</h2>
      <p>{to}</p>
      <p>見積金額 {yen(total)}</p>
    </div>
  );
}

/* 印刷のときだけ見せるもの（画面では隠す） */
.print-only { display: none; }

@media print {
  .no-print, .screen-only { display: none; }
  .print-only { display: inline; }
  body { background: #fff; }
  .layout { display: block; min-height: 0; }
  .sheet { margin: 0; padding: 0; box-shadow: none; }
  /* 見出しの行の背景色も印刷する */
  thead th { print-color-adjust: exact; }
  /* 合計の欄の途中でページが分かれないようにする */
  .summary { break-inside: avoid; }
  /* リンク先の URL を紙にも出す */
  .summary a::after { content: "（" attr(href) "）"; }

  /* usePrintOnly で描いた要素があるときは、それ以外を印刷しない */
  body:has(> .print-portal) > :not(.print-portal) { display: none; }
}

@page {
  size: A4;
  margin: 15mm 12mm 18mm;
  @bottom-center { content: counter(page) " / " counter(pages); font-size: 9pt; font-family: "Noto Sans CJK JP", sans-serif; }
}

/* usePrintOnly で描いた要素は、画面には出さない */
@media screen { .print-portal { display: none; } }

[1ページ] 大きさ 595.0 x 841.9 pt（210 x 297 mm）
  最初の3行: 見積書 | 見本 様 | No. 品名 単価 数量 金額
  最後の3行: 24 部品 24 4,650 円 1 4,650 円 | 25 部品 25 4,800 円 1 4,800 円 | 1 / 3

print.css のまま: LiberationSerif, NotoSansCJKjp-Bold, NotoSansCJKjp-Regular
@bottom-center に font-family を足した後: NotoSansCJKjp-Regular, NotoSansCJKjp-Bold

--- out/quote.pdf
  見出しの行「No.」の左隣の色: (200, 238, 246)
--- out/quote-no-adjust.pdf
  見出しの行「No.」の左隣の色: (255, 255, 255)

[2ページ] 大きさ 595.0 x 841.9 pt（210 x 297 mm）
  最初の3行: No. 品名 単価 数量 金額 | 26 部品 26 4,950 円 1 4,950 円 | 27 部品 27 5,100 円 1 5,100 円

out/quote.pdf 3ページ 合計=3ページ目 有効期限=3ページ目 お支払い方法=3ページ目
out/quote-no-avoid.pdf 3ページ 合計=2ページ目 有効期限=2ページ目 お支払い方法=3ページ目

import { useEffect, useState, type ReactNode } from 'react';
import { createPortal, flushSync } from 'react-dom';

// 渡した要素だけを印刷する。要素は body の直下に描き、印刷が終わったら消す
export function usePrintOnly() {
  const [content, setContent] = useState<ReactNode>(null);

  useEffect(() => {
    const clear = () => setContent(null);
    window.addEventListener('afterprint', clear);
    return () => window.removeEventListener('afterprint', clear);
  }, []);

  const printOnly = (node: ReactNode) => {
    // 印刷ダイアログが開く前に、要素を DOM に入れておく
    flushSync(() => setContent(node));
    window.print();
  };

  const portal = content === null ? null : createPortal(<div className="print-portal">{content}</div>, document.body);
  return { printOnly, portal };
}

--- out/slip.pdf
ページ数 1
[1ページ] 大きさ 595.0 x 841.9 pt（210 x 297 mm）
  最初の3行: 受付票 | 見本 様 | 見積金額 254,850 円

受付票だけ印刷（window.print() そのまま）: [
  'beforeprint: 受付票=あり',
  'afterprint: 受付票=あり',
  'afterprint の後: 受付票=なし'
]

function useInEffect() {
  const [content, setContent] = useState<ReactNode>(null);
  useEffect(() => {
    if (content === null) return;
    const clear = () => setContent(null);
    window.addEventListener('afterprint', clear);
    window.print();
    return () => window.removeEventListener('afterprint', clear);
  }, [content]);
  return { printOnly: setContent, portal: content === null ? null : createPortal(<div className="print-portal">{content}</div>, document.body) };
}

variants.html?v=noflush: window.print() の呼び出し = [ '受付票なし' ]
variants.html?v=effect: window.print() の呼び出し = [ '受付票あり' ]
variants.html?v=effect&strict: window.print() の呼び出し = [ '受付票あり' ]
variants.html?v=noflush&strict: window.print() の呼び出し = [ '受付票なし' ]