javascript(jQuery)で印刷プレビューをする

データベース系のサイトを構築している。

一覧表のページに印刷需要があるので、print.cssに@media print { #sidebar {display:none;} }なんて書いていたが、

• 画面全体をそのまま印刷できること
• サイドバーなどを非表示にしたデータのみの印刷も可能なこと

の2パターンで印刷したいらしい。

画面全体の印刷はブラウザの印刷機能に任せるとして、別にデータのみの印刷に対応した印刷プレビュー機能を実装する。

以下実行した対応。

処理のイメージ

画面全体の印刷はブラウザの印刷機能に任せるとして、別にデータのみの印刷に対応した印刷プレビューを表示させなくてはならない。

画面操作フローとしては以下のようになる。

1. 印刷プレビューボタンクリックする。
2. 別ウィンドウで、サイドバー等が非表示になったプレビュー画面が表示される。
3. プレビュー画面で印刷ボタンをクリックする。
4. ブラウザの印刷が立ち上がる。

以下作業手順。

印刷プレビューボタンを設置する

ブラウザの印刷機能と区別するため、印刷プレビューボタンを各画面に設ける。

<span class="print-preview">印刷プレビュー</span>

印刷プレビューボタンのクリックイベントを書く

$(function() {

    //プリントプレビュークリックイベント
    $(document).on('click','.print-preview',function(){
        doPrintPreview();
    });

});

/**
 * プリントプレビュー
 */
doPrintPreview = (function(){
    //現在のURLに'print'パラメータを付加し、新しいウィンドウで表示させる。
    window.open(location.href+'?print=true');
});

印刷プレビュー表示時の処理を書く

$(function() {
    //URLパラメータに'print'が存在する場合、
    if (location.href.indexOf('?print') > -1) { 
        //bodyにprintクラスを付加。
        $("body").addClass('print');

        //.btnBoxの中身を空にし、印刷ボタンをアペンド。
        $('.btnBox').html('').append('<input type="button" value="印刷する" id="doPrint" name="doPrint">');

        //印刷ボタンのクリックイベントに印刷機能を設定
        $('#doPrint').on('click', function(){
            window.print();
        });

    }
});

print.cssの記述

@charset "UTF-8";

/*------------------------------------------

プリントプレビュー用

------------------------------------------*/

body.print {

    body {
        /* フォントを濃く */
        color:#111;
        /* 背景を白に */
        background-color:#fff;
    }
    #header,
    #bc,
    #side,
    #footer
    {
        /* 非表示 */
        display:none;
    }
    #content {
        /* 幅をブラウザに任せる */
        width: auto;
        padding: 0;
        float: none;
        background-color: #fff;
    }
    table td,
    table th {
        /* ボーダーを濃く */
        border:solid 1px #000 !important;
    }

}

@media print {
    /* 通常のプリントは見たままを印刷したい。 */
    /* 印刷ボタンを表示しているボックスだけ印刷時に非表示 */
    .btnBox {
        display:none;
    }
}