ページ全体を印刷するボタンは簡単に設置することができますが、ページの一部分だけとなると、途端に難しくなります。今回は印刷用CSSとJQueryで作成する方法を紹介しようと思います。
◯ページ全体を印刷するボタンの設置方法
その前にページ全体を印刷する方法をついでにご紹介します。
<p class="aaa" onclick="window.print();">印刷</p>
クリックしたら印刷画面を表示させる「onclick=”window.print();”」を書くと、ページ全体を印刷するボタンを作成することができます。
◯ページの一部分だけを印刷するボタンの設置方法
それでは、本題のページの特定の箇所だけを印刷するボタンの作成方法を紹介します。
◯HTML部分
<div>
<p class="print-title">タイトルタイトルタイトル</p>
</div>
<ul>
<li class="print-page">
<img src="images/logo.png" width="500" alt="aaa">
<h2 class="bbb">コピー</h2>
<p class="print-btn">印刷ボタン</p>
</li>
<li class="print-page">
<img src="images/top_img_company_table3.jpg" width="500" alt="あああ">
<h2 class="bbb">コピー２</h2>
<p class="print-btn">印刷ボタン</p>
</li>
</ul>
上記のHTMLで印刷する箇所は”.print-title”と”.print-page”で、印刷ボタンは”.print-btn”です。クラス名は任意のもので問題ありません。
◯Javascript部分
$(function(){
//個別印刷ボタンをクリックした時
$('.print-btn').each(function(){
$(this).on('click', function(){
//プリントしたいエリアの取得
var printPage = $(this).closest('.print-page').html();
printTitle = $('.print-title').html();
//プリント用の要素「#print」を作成
$('body').append('<div id="print"></div>');
$('#print').append(printPage).append(printTitle);
//「#print」以外の要素に非表示用のclass「print-off」を指定
$('body > :not(#print)').addClass('print-off');
window.print();
//window.print()の実行後、作成した「#print」と、非表示用のclass「print-off」を削除
$('#print').remove();
$('.print-off').removeClass('print-off');
});
});
});
上記のコードをもとに細かく見ていきます。
①印刷ボタンそれぞれに（・・・）内の処理をします。
$('.print-btn').each(function(){・・・});
②クリックしたら、（・・・）内の処理をします。
$(this).on('click', function(){・・・});
③プリント用のHTMLを追加します。ここに書いてあるものが印刷されます。
//プリントしたいエリアの取得
var printPage = $(this).closest('.print-page').html();
printTitle = $('.print-title').html();
//プリント用の要素「#print」を作成
$('body').append('<div id="print"></div>');
$('#print').append(printPage).append(printTitle);
④印刷する箇所以外を非表示にして、印刷画面を表示します。
//「#print」以外の要素に非表示用のclass「print-off」を指定
$('body > :not(#print)').addClass('print-off');
window.print();
⑤印刷が終わったら③と④の処理をリセットし、元の画面にします
//window.print()の実行後、作成した「#print」と、非表示用のclass「print-off」を削除
$('#print').remove();
$('.print-off').removeClass('print-off');
◯Style部分
.print-off{display:none;}
@media print{
.print-off{display:none;}
}
印刷したくない部分を消す
印刷しない箇所を消します。印刷画面と通常画面の両方を消さないとうまくいかないブラウザがあったので、両方display:noneにします。