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
Webページの印刷では、スタイルで改ページを制御することができます。
page-break-before
, page-break-after
はそれぞれ、適応された要素の直後、直前で改ページを出力します。 PCの主要ブラウザはすべて対応しています。
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>
印刷ボタンを用意して、ボタンは印刷時には非表示にするようにスタイルを指定します。また、改ページの動作を確認できるようにスタイルで改ページを出力しています。
印刷ボタンを押して動作を確認してみてください。
—ここからサンプル—
この要素直後で改ページ
↓↓↓ブロック以外の要素には↓↓↓
spanです。
↑↑↑改ページスタイルが効かない↑↑↑
この要素直前で改ページ
—ここまでサンプル—
以上。
コメントを書く