Zenn
🖨️

【jQuery】印刷ボタンを作成する

2022/06/03に公開
HTML
JavaScript
jQuery
frontend
tech

まずは完成形

たった1行で実装できる！

ウィンドウを印刷する、という機能はこちらのJava Scriptのコードを使っていきます。

 window.print();

方法① onclick属性を使う

実装したい要素にonclick="window.print();"を追加してください。
これで「クリックしたら、印刷ダイアログを開く」という動作が実現できます！

<!-- inputタグ -->
<input type="button" value="INPUT" onclick="window.print();" class="btn-style">

<!-- buttonタグ -->
<button type="button" onclick="window.print();" class="btn-style">BUTTON</button>

<!-- aタグ -->
<a onclick="window.print();return false;" class="btn-style">ANCHOR</a>

aタグを使う時は、デフォルトの「クリックしたらリンクする」という機能を無効化するためにreturn false;を付けましょう。
無くても一応動きますが、思わぬところへの影響を防ぐためにも記述することをおすすめします。

方法② JSで実装する

該当のクラス名に対して、クリックイベントで設定していきます。

$(".btn-print").click(function () {
  window.print();
});

「onclick属性」と「JS」使い分け方としては、例えばボタンが複数ある場合なんかは、JSで一気に指定する方がシンプルかつ便利で良さそうすね。

一部だけ印刷する【上級】

ページの一部だけ印刷したい！という時のやり方です。

  1. ボタンをクリックしたら
  2. 要らない部分を非表示にする
  3. プリントする
  4. 終わったら元に戻す

という流れで記述していきます。

$(".wrapper3 button").click(function () { // 1.ボタンをクリックしたら
  let w1 = $(".wrapper1");
  let w2 = $(".wrapper2");
  w1.hide(); // 2.要らない部分を非表示にする
  w2.hide();
  window.print(); // 3.プリントする
  w1.show(); // 4.終わったら元に戻す
  w2.show();
  return false;
});

さいごに

実務でコーディングしてる時に、「あれ、そういえば印刷ボタンってどうやるんだっけ？」となったので、今回取り上げました。
たまに出てくるので、忘れたら、またこちらに見に来てください😂

Twitterで質問受け付けておりますので、分からないことがあればDMくださいね♪
https://twitter.com/yurippe_dev

Discussion