ボタンごとに印刷エリアを変える

印刷こんにちは、ウェブラボクリエイターズメモです。

ウェブページを印刷する時に「この部分だけを印刷できたらいいのに」と思った事はありませんか?
@media printやprint.cssを用いれば簡単に印刷用のスタイルが設定できます。
しかしこれらはページ全体にかかるスタイルの為、”Aのボタンを押すと任意のAの範囲を、Bのボタンを押すと任意のBの範囲を印刷する”といったような個別指定はできません。

 

そんなときに使える印刷用のJSをご紹介していきたいと思います。
今回紹介する方法を用いると、非常に自由度の高い個別の印刷スタイル設定が可能になります。

 

まずはこちらのデモページでご覧ください。
DEMO

 

こちらの記事を参考にしました。
https://www.tam-tam.co.jp/tipsnote/javascript/post7977.html

 

必要なソースは以下になります。

 

■HTML

※必ず.print-pageが.print-btnの親要素になるように記述してください

 

■CSS

その他は任意のスタイルをご指定下さい。

 

■JS

 
これだけで仕組みの設定は完了です。
JSの仕組みをざっくりと説明すると、クリックしたボタンに一番近い「親要素」の.print-pageを取得し、それ以外の要素に「.print-off」というクラス名がつき、
.print-off { display: none; } によってそれらが消える、という仕組みです。

 

そのため、
①.print-offの親要素に.print-pageを配置すること
②.print-off { display: none; } の記述すること
の二つは忘れないように気を付けてください。

 

今回の実装に限らず、印刷時に気を付けて頂きたいことがあります。
DEMOページにも記載しましたが、backgroundで指定したもの(背景)は各ユーザーが印刷設定で「背景を印刷する」を選択をしないと表示されないことがあります。
全ブラウザに対応するには、「背景色は印刷されない」という前提で綺麗に表示したい部分は画像にするなどの工夫が必要です。

 

非常に簡単に実装出来るので、是非お試しください。
以上、クリエイターブログでした。

  • このページを共有する