Webの印刷ダイアログ周り知識まとめ

仕事で、javascriptのwindow.print()を使う機会がありました
そこら辺周りの知識がすっぽりなかったので、色々調べた自分用備忘録です

window.print()とは

Web画面に表示されているものを印刷するために、印刷ダイアログを開きます
windowは省略可能なので、print()だけでも動きます

サンプルコード

<button type="button" id="sample">印刷する</button>
<div>
<h1>サンプル報告書</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

document.getElementById('sample').onclick = ()=> {
    window.print();
}

勿論、javascriptファイルなしで

<button type="button" id="sample">印刷する</button>

を

<button onclick="window.print(); return false;" id="sample">印刷する</button>

に書き換えても動きます

画面上には表示されているけど、印刷したくないものがある場合

画面上では、表示しておきたいけど印刷物には入って欲しくない要素は
印刷時のCSSを設定できるメディアクエリを使って調整します

先程のサンプルコードでは、「印刷する」ボタンが印刷ダイアログに表示されてしまうので
ボタンが印刷されないよう消します

サンプルコード

@media print {
  #sample {
    display: none;
  }
}

配置されていた箇所の要素分、空白にしてしまいたい場合は、
visibility:hiddenで対応できますので、場合によってはそっちもいいかもですね

印刷ダイアログの内容を開発者ツールで確認する方法

印刷ダイアログに表示されているものを画面上に映し出して検証を行いたい時の方法です

1. 開発者ツールを開く（Macでは、option+command+I）
2. 縦3点リーダーをタップ
   
3. 一覧から「レンダリング」をタップ
4. レンダリングタブから「CSSメディアタイプをエミュレート」を印刷に変更する
   

任意の箇所で改ページを入れたい時

改ページはCSSでpage-break-beforeやpage-break-afterで制御可能です
MDN読むと、
page-break-beforeは、break-before
page-break-afterは、break-after
のように、新しいプロパティに置き換えられたようなので新しい方を使います

サンプルコード

<button onclick="window.print(); return false;" id="sample">印刷する</button>

<!-- 1ページ目 -->
<div class="page1">
<h1>サンプル報告書1</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

<!-- 2ページ目 -->
<div class="page2">
<h1>サンプル報告書2</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

サンプルコード

@media print {
  #sample {
    display: none;
  }
}

.page2 {
  break-before: page;
}

印刷ダイアログの用紙サイズ・向きを設定する方法

CSSにて@pageで設定可能です

サンプルコード

<button type="button" id="sample">印刷する</button>
<div class="h-view">
<h1>サンプル報告書</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

/* 横向きにしたい場合はlandscape
縦向きにしたい場合はportrait */
@page {
  size: A4 landscape;
}

因みに、向きに関する英単語の成り立ちが面白かったので記載
portraitは、人物写真や肖像画という意味がありますが
肖像画で顔や上半身を描写するために縦長のキャンパスを使用していたことが転じて
縦長の、縦向きのという意味に、
landscapeも同様に、景色や風景という意味がありますが
風景画などを描くときは横長のキャンパスをよく使用していたことが転じて
横長の、横向きのという意味になったらしいです
（参考：https://eigo.substack.com/p/portrait-and-landscape）

空白ページが入ってしまった時に考えられる原因

2ページ分印刷する予定だった帳票が、2ページ目・4ページ目に空白ページが表示されてしまうという問題がありました
それぞれの要素にheight: 100vh;を設定しているためA4サイズとして表示した時に
幅が超えてしまったのが原因のようです
1ページ目に背景色を緑、2ページ目に背景色を黄色で設定してみるとわかりやすいです

空白ページが発生してしまうコード

<button type="button" id="sample">印刷する</button>

<!-- 1ページ目 -->
<div class="page1">
<h1>サンプル報告書1</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

<!-- 2ページ目 -->
<div class="page2">
<h1>サンプル報告書2</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

.page1 {
  height: 100vh;
  background-color:#008000;
}

.page2 {
  height: 100vh;
  background-color:#ffff00;
  page-break-before: always;
}

@media print {
  #sample {
    display: none;
  }
}

PDF上だとこう表示される
2ページ目の頭に緑の背景色、
4ページ目の頭に黄色の背景色が入ってくる

画面上では、height: 100vh;にしたいけど、
印刷ページでは空白ページを表示したくないという場合はheight: auto;を設定すると空白ページは消えます

サンプルコード

<button type="button" id="sample">印刷する</button>

<!-- 1ページ目 -->
<div class="page1">
<h1>サンプル報告書1</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

<!-- 2ページ目 -->
<div class="page2">
<h1>サンプル報告書2</h1>
<h2>サンプル項目1</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
<h2>サンプル項目2</h2>
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>

.page1 {
  height: 100vh;
  background-color: #008000;
}

.page2 {
  height: 100vh;
  background-color: #ffff00;
  page-break-before: always;
}


@media print {
  #sample {
    display: none;
  }
  .page1 {
    height: auto;
  }
  .page2 {
    height: auto;
  }
}