← カテゴリ一覧に戻る

印刷ダイアログの表示

window.print @media print beforeprint

ブラウザの印刷ダイアログを呼び出し、印刷用にコンテンツを最適化します。

デモ：印刷ボタン

印刷プレビュー対象コンテンツ

これが印刷されるコンテンツです。CSSの @media print で印刷時の表示を制御できます。

コード例

js
// 印刷ダイアログを表示
window.print();

// 印刷前後のイベント
window.addEventListener('beforeprint', () => {
  // 印刷前の処理（グラフを展開する、など）
  document.querySelector('.print-only').style.display = 'block';
});

window.addEventListener('afterprint', () => {
  // 印刷後の処理
  document.querySelector('.print-only').style.display = 'none';
});

// 特定要素だけ印刷する
function printElement(el) {
  const content = el.innerHTML;
  const win = window.open('', '_blank');
  win.document.write(`
    <html>
      <head>
        <title>印刷</title>
        <link rel="stylesheet" href="/print.css">
      </head>
      <body>${content}</body>
    </html>
  `);
  win.document.close();
  win.focus();
  win.print();
  win.close();
}

@media print による制御

js
/* 印刷時にのみ適用されるスタイル */
@media print {
  /* ナビゲーション・広告など非表示 */
  .no-print,
  nav,
  footer,
  aside {
    display: none !important;
  }

  /* 印刷時のみ表示 */
  .print-only {
    display: block !important;
  }

  /* 改ページ制御 */
  .page-break-before { page-break-before: always; }
  .page-break-after  { page-break-after: always; }
  .no-page-break     { page-break-inside: avoid; }

  /* リンクのURLを表示 */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: gray;
  }

  /* 印刷サイズの指定 */
  @page {
    size: A4 portrait;  /* A4縦 */
    margin: 20mm;
  }
}

/* プリンタ向けの色指定 */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; /* 背景色を印刷 */
  }
}

Tips印刷対応のベストプラクティス

  • ナビゲーション・ヘッダー・フッターは display: none で非表示に
  • URLは a::after { content: attr(href) } で表示する
  • 背景色を印刷する場合は print-color-adjust: exact を使用
  • SVGグラフは印刷に対応しているが、Canvasは印刷に不向き
  • PDF出力が必要なら jsPDF や Puppeteer（サーバー側）を検討

🤖 AIプロンプトテンプレート

以下のようなwindow.print()とCSS印刷対応のサンプルコードを生成してください：
- window.print()で印刷ダイアログを表示する基本実装
- beforeprint / afterprintイベントで印刷前後に処理する方法
- @media printで印刷時に非表示にする要素の指定（nav、広告など）
- @pageルールでA4サイズ・余白・印刷向きを指定する方法
- page-break-before / page-break-insideを使った改ページ制御

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo