印刷ボタン

2023年4月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「印刷ボタン」を作ってみようと思います。

印刷ボタン

ページ全体を印刷するには、<button>にonclick="window.print();"を設定するだけです。

<button onclick="window.print();">印刷する</button>

この印刷プレビューの画面幅の設定がどうなってるのか、よくわかりません。

なかなか意図したレイアウトにならないですね。

指定した部分のみ印刷

印刷する時にヘッダーやフッターはいらない、印刷ボタンも消したい、私の顔も消したいという場合は、jQueryとメディアクエリ（@media print）を使って不要な部分を非表示にします。

印刷ボタンにprint-btn、印刷したい部分にprint-area、印刷したくない部分にはnot-printというクラスを付与しておきます。

印刷ボタンもprint-areaの中に入れておいた方がいいみたいです。

<div class="print-area">

↓↓ここから印刷↓↓

↑↑ここまで印刷↑↑

<button class="print-btn not-print">印刷する</button>

</div>

以下のCSSを設定します。

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

以下のスクリプトを記述します。

$(function(){
  var elm = $('.print-area');
  var hide_elm = $('.not-print');
  elm.each(function(i){
    elm.eq(i).find('.print-btn').click(function(){
      hide_elm.addClass('print');
      elm.not(elm.eq(i)).addClass('print');
      window.print();
      hide_elm.removeClass('print');
      elm.removeClass('print');
    });
  });
});

.not-printがある部分に、印刷時に.printを付与して非表示にして、また元に戻すっていう意味ですかね。

スマホではなぜか効果がないようです。
スマホからプリンターで印刷することはあまりないとは思いますが。

ここから印刷

まとめ

私はWindowsに最初から入っている「Snipping Tool」をよく使います！

まあ PrtSc でいいんですけどね。

地図を埋め込んだページとかに印刷ボタンがあるといいかもですね。