[Javascript] Webページ印刷時のTips

20190130_[Javascript] Webページ印刷時のTips

Webページ印刷時の JS, CSS の備忘録

Webページを印刷する際に役立つメモを残します。システムで帳票印刷を手軽に行う際に必要になります。

Javascript で印刷ダイアログを表示する

print() を使うことで、印刷ダイアログを表示することができます。

右クリックから印刷メニューをクリックしたり、ブラウザのメニューから印刷を選択するのと同じ動作を行います。

例えば印刷ボタンを用意して、押下時に印刷処理を起動するには次のようなボタンを用意します。

<input type="button" value="印刷" onclick="print()" />

例: ↓のボタンを押すと印刷ダイアログが開きます。

印刷時だけ適応されるCSS

印刷時だけ適応されるCSSを定義することが可能です。メディアクエリを print にします。

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

このスタイルシートのファイルは印刷時のみに読み込まれて有効になります。指定の要素を非表示にしたりするのに使えます。

印刷時に非表示にするCSS

ファイルごと分けなくても、以下の書き方でも可能です。

@media print{
    .no_print{
        display: none;
    }
}

上の例だと、.no_print を適応した要素が印刷時には表示されないため、印刷されなくなります。

印刷時の改ページを制御するCSS

page-break-after | MDN

page-break-before | MDN

Webページの印刷では、スタイルで改ページを制御することができます。

page-break-before, page-break-after はそれぞれ、適応された要素の直後、直前で改ページを出力します。 PCの主要ブラウザはすべて対応しています。

break-after | MDN

break-before | MDN

break-before, break-after というスタイルもありますが、これらは新しいスタイルです。Firefoxだけが対応していないようです。IEは10以上なら使えます。利用可能ブラウザを見て、新しいスタイルで問題なければ使いましょう。

ブロックレベルの要素にしか適応されない 、という点には注意しておきましょう。spanタグなどでは改行できません。

page-break-after(page-break-before) の値

page-break-after で使える値です。

auto は初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

always は要素の後で必ず改ページが行われるように強制します。

avoid は要素の後で改ページされないようにします。

そのほか left, right, recto, verso 等あるみたいです。

<div style="page-break-after: always;">この要素の直後に改ページ</div>

page-break-before の値も同様で、要素の前に改ページが行われるようになります。

break-after(break-before) の値

break-after のスタイルで改ページにかかわる値です。

avoid-page

該当するボックスの直後の改ページを禁止します。

page

該当するボックスの直後で改ページを行います。

<div style="break-after: page;">この要素の直後に改ページ</div>

break-before の値も同様で、要素の前に改ページが行われるようになります。

サンプル

<style>
    @media print {
        .noprint {
            display: none;
        }
    }
</style>

<button class="noprint" onclick="print()">印刷</button>

<h2 style="page-break-after: always;">この要素直後で改ページ</h2>

<p>↓↓↓ブロック以外の要素には↓↓↓</p>
<span style="page-break-after: always;">spanです。</span>
<p>↑↑↑改ページスタイルが効かない↑↑↑</p>

<h2 style="page-break-before: always;">この要素直前で改ページ</h2>

印刷ボタンを用意して、ボタンは印刷時には非表示にするようにスタイルを指定します。また、改ページの動作を確認できるようにスタイルで改ページを出力しています。

印刷ボタンを押して動作を確認してみてください。

—ここからサンプル—

—ここまでサンプル—

以上。

参考URL

• page-break-after | MDN
• page-break-before | MDN
• break-after | MDN
• break-before | MDN