こんにちは。私は普段、PHP言語やRuby言語を使うバックエンド側の実装をすることの方が多いのですが、この前久々にJavaScript(jQuery)を触りました。
JavaScriptで動きをつけるのは本当に楽しく、こんなこともできるのかという発見を実装するたびに見つけて喜んでいます。
今回はこの前見つけた、WEBサイトに印刷するボタンを設置する方法を紹介いたします。ただの印刷するボタンだと面白くないので、指定した範囲だけを印刷する方法も紹介いたします。
当記事の対象者としましては以下のとおりです。
- WEBサイトに印刷するボタンを設置したい方へ
- ページ内の指定した範囲だけを印刷させたい方へ
- JavaScript, jQueryを楽しく感じられる方へ
どうぞ最後までよろしくお願いいたします。
WEBサイトに印刷するボタンを設置したい方へ
とても簡単です。タグのonclickイベントが走ったときにwindow.print()が実行されるようにするだけです。 これはブラウザの印刷ダイアログを呼び出すためのJavaScriptのメソッドになります。
See the Pen html_window_print by ジーニアスウェブ (@genius-web) on CodePen.0
button タグと a タグの例です。a タグの場合は href 内への遷移を無効化するためにreturn false;をつけ忘れないようにしましょう。
See the Pen jquery_window_print by ジーニアスウェブ (@genius-web) on CodePen.0
jQueryで書く場合はこうですね。指定のクラスのclickイベントをつけております
印刷ボタンを設置して、ページ全体を対象とした印刷ダイアログは表示されました。案外簡単なんですね。
ページ内の指定した範囲だけを印刷させたい方へ
場合によっては指定した範囲だけを印刷させたい場合があると思います。その場合は、一時的に印刷対象外の箇所を非表示にさせ、印刷ダイアログから戻ってきたらその箇所の表示も戻すようにすれば実現が可能です。
See the Pen jquery_print_area by ジーニアスウェブ (@genius-web) on CodePen.0
さいごに
いかがでしたでしょうか。私は普段することのない分野の実装をする際に面白い発見とかあったら良いなと考えてます。JavaScript、jQueryの実装はとても楽しく、今回はこの様な発見を見つけれてとても嬉しかったです。またなにか面白いこと紹介できたらと思います。それでは。
