【JavaScript】ページの任意(一部)の範囲のみを印刷する方法

スポンサーリンク

帳票として、ページを印刷する機会があり
どうやってwebページを印刷するのか調べてみましたのでご紹介します。

準備

ボタンを押したら、画面上部の「青色」と「赤色」のDIVだけが印刷されるようにしたいと思います。


下の「緑色」は省くといった感じですね。

HTMLとJavaScriptを同じファイルで書きました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>テスト</title>
    <style>
        /* 見た目のスタイル */
        .top_row{
            display: flex;
            justify-content: space-around;
        }
        .bottom_row{
            display: flex;
            justify-content: center;
        }
        div>div{
            width: 100px;
            height: 100px;
        }
        #left_box{
            background-color: #69A2B0;
            font-size: 40px;
            color: #ffffff;
            text-align: center;
        }
        #right_box{
            background-color: #E05263;
            font-size: 40px;
            color: #ffffff;
            text-align: center;
        }
        #center_box{
            background-color: #659157;
            font-size: 40px;
            color: #ffffff;
            text-align: center;
        }

        /*印刷対象外クラスのスタイル*/
        .no_print{
            display: none;
        }
    </style>
    <script
            src="https://code.jquery.com/jquery-3.4.0.min.js"
            integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
            crossorigin="anonymous"></script>
    <script>
        // 印刷ファンクション
        function printScreen() {
            // 「緑色のボックスが入っているdiv」と「印刷ボタン」を印刷対象外(非表示)にする。
            $('.bottom_row,#print_button').addClass('no_print');
            // 画面を印刷する
            window.print();
            // 「緑色のボックスが入っているdiv」と「印刷ボタン」の印刷対象外(非表示)を解除する。
            $('.bottom_row,#print_button').removeClass('no_print');
        }
    </script>
</head>
<body>
<div class="top_row">
    <div id="left_box">
        青色
    </div>
    <div id="right_box">
        赤色
    </div>
</div>
<div class="bottom_row">
    <div id="center_box">
        緑色
    </div>
</div>
<button id="print_button" onclick="printScreen()">青と赤をプリントする</button>
</body>
</html>

※クラス操作にjQueryを利用しています。

印刷は「window.print()」

上記のhtmlファイルにある、printScreen()ファンクションをご覧ください。

// 印刷ファンクション
function printScreen() {
    // ①:「緑色のボックスが入っているdiv」と「印刷ボタン」を印刷対象外(非表示)にする。
    $('.bottom_row,#print_button').addClass('no_print');
    // ②:画面を印刷する
    window.print();
    // ③:「緑色のボックスが入っているdiv」と「印刷ボタン」の印刷対象外(非表示)を解除する。
    $('.bottom_row,#print_button').removeClass('no_print');
}

やっていることはとっても簡単です。

  1. 印刷したくない個所をクラス追加で非表示(display:none)にする。
  2. プリントするため「window.print()」メソッドを呼び出す。
  3. ①で追加したクラスを取り除く(非表示を解除する)。

実行してみる

できました。

でも色が出ていません。

これは設定ですので下記手順で設定してください。

 

  1. 詳細設定を開く
  2. オプション>「背景のグラフィック」にチェックを入れる

お試しください。

参考サイト

Javascript:print()メソッドを使用して印刷ボタンを設置 | raining
Javascriptのprint()メソッドを使用して、印刷ボタンを設置した時の方法を記載します。

 

 

 

タイトルとURLをコピーしました