2022/08/26 21:57

ページの印刷時に除外したい要素を隠す方法をjQueryで簡単実装

WEBページを「印刷ボタン」的なものをクリックしてすぐに印刷できるようにする時に、邪魔な要素は除外できるとユーザビリティ的にもありがたいですよね。例えば「ヘッダーとかフッターは印刷画面には不要なんだけどなぁ…」という場合です。そういった場合は印刷ボタンをクリックした瞬間に隠してしまえばOKです。

// 印刷設定
$(function() {
  $('.c-header-nav-print-area').on('click', function() {
    // 隠すもの
    $('#header').css('display','none');
    $('#footer').css('display','none');
    // スタイルを変えるものがあれば同様に
    $('#p-content').css('margin','0 auto');
    $('#p-content').css('width','100%');
 
    // 印刷ダイアログ画面起動
    window.print();
 
    // 印刷後に戻す
    $('#header').css('display','block');
    $('#footer').css('display','block');
    // 印刷後にスタイルも戻す
    $('#p-content').css('margin','0 0 0 240px');
    $('#p-content').css('width','calc(100% - 240px - 360px)');
  });
});