ボタンごとに印刷エリアを変える

2019.12.20　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボクリエイターズメモです。

ウェブページを印刷する時に「この部分だけを印刷できたらいいのに」と思った事はありませんか？
@media printやprint.cssを用いれば簡単に印刷用のスタイルが設定できます。
しかしこれらはページ全体にかかるスタイルの為、”Aのボタンを押すと任意のAの範囲を、Bのボタンを押すと任意のBの範囲を印刷する”といったような個別指定はできません。

そんなときに使える印刷用のJSをご紹介していきたいと思います。
今回紹介する方法を用いると、非常に自由度の高い個別の印刷スタイル設定が可能になります。

まずはこちらのデモページでご覧ください。
→DEMO

こちらの記事を参考にしました。
https://www.tam-tam.co.jp/tipsnote/javascript/post7977.html

必要なソースは以下になります。

■HTML

<div class="print-page">
    <p>この中にAボタンを押したときに印刷したい要素を入れます。</p>
    <p class="print-btn">Aボタン</p>
</div>

<div class="print-page">
    <p>この中にBボタンを押したときに印刷したい要素を入れます。</p>
    <p class="print-btn">Bボタン</p>
</div>

<p>全体を印刷するボタンも設置したいときは、ボタンのクラス名をprint-allにします。</p>
<p class="print-all">全体印刷ボタン</p>

<p>この中にAボタンを押したときに印刷したい要素を入れます。</p>

</div>

<p>この中にBボタンを押したときに印刷したい要素を入れます。</p>

</div>

<p>全体を印刷するボタンも設置したいときは、ボタンのクラス名をprint-allにします。</p>

<p class="print-all">全体印刷ボタン</p>

※必ず.print-pageが.print-btnの親要素になるように記述してください

■CSS

.print-off {
    display: none;
}

@media print {
    //印刷時に適用したいスタイルをここに記載
    .print-btn,.print-all {
        display: none;
    }
}

.print-off {

display: none;

}

@media print {

//印刷時に適用したいスタイルをここに記載

.print-btn,.print-all {

display: none;

}

その他は任意のスタイルをご指定下さい。

■JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){

    //個別印刷用
    $('.print-btn').on('click', function(){
        var printPage = $(this).closest('.print-page').html();
        $('body').append('<div id="print"></div>');
        $('#print').append(printPage);
        $('body > :not(#print)').addClass('print-off');
        window.print();
        $('#print').remove();
        $('.print-off').removeClass('print-off');
    });

    //一括印刷用
    $('.print-all').on('click', function(){
        window.print();
    });

});
</script>

$(function(){

//個別印刷用

$('.print-btn').on('click', function(){

var printPage = $(this).closest('.print-page').html();

$('body').append('<div id="print"></div>');

$('#print').append(printPage);

$('body > :not(#print)').addClass('print-off');

window.print();

$('#print').remove();

$('.print-off').removeClass('print-off');

});

//一括印刷用

$('.print-all').on('click', function(){

window.print();

});

</script>

これだけで仕組みの設定は完了です。
JSの仕組みをざっくりと説明すると、クリックしたボタンに一番近い「親要素」の.print-pageを取得し、それ以外の要素に「.print-off」というクラス名がつき、
.print-off { display: none; } によってそれらが消える、という仕組みです。

そのため、
①.print-offの親要素に.print-pageを配置すること
②.print-off { display: none; }　の記述すること
の二つは忘れないように気を付けてください。

今回の実装に限らず、印刷時に気を付けて頂きたいことがあります。
DEMOページにも記載しましたが、backgroundで指定したもの（背景）は各ユーザーが印刷設定で「背景を印刷する」を選択をしないと表示されないことがあります。
全ブラウザに対応するには、「背景色は印刷されない」という前提で綺麗に表示したい部分は画像にするなどの工夫が必要です。

非常に簡単に実装出来るので、是非お試しください。
以上、クリエイターブログでした。

関連記事こちらの記事も合わせてどうぞ。