【ブラウザの印刷機能を使う2】 jsで印刷範囲の指定


cssで印刷範囲を指定する方法は以前に書きました。

http://sakusabe.blogspot.jp/2012/01/css.html

が、動的ページだと上記の方法が通用しない場合もあるかと思います。

以下の方法であれば、おそらくどんな状況でも印刷したい範囲だけ印刷することが出来ます。

※jQuery必須です。


■前提


1.印刷用CSSの指定


以下のようなかたちで、事前に印刷時用のCSSが読み込まれているものとします。

<link rel="stylesheet" type="text/css" href="css/printoff.css" media="print" />


/*-------printoff.cssの内容ここから-------*/


.off{display:none}



/*-------printoff.cssの内容ここまで-------*/



2.印刷したい要素は$(".print_parent")の中に予め格納されている


bodyの中のどこでも構わないので、

<div class="print_parent"></div>

みたいな印刷する要素を格納する場所を用意して下さい。
この要素を表示しておけば、そのまま印刷プレビューになります。


3.印刷ボタン$(".print_btn")がある


これもタグは問わないので、print_btnというclassが指定された要素を用意して下さい。
これが印刷ボタンになります。


■その上で・・・


以下のコードを記述します。

$(".print_btn").live("click",function(){//印刷ボタン
var data = $(".print_parent").html();
$("body").append("<div id="printbody"></div>");
$("#printbody").append(data);
$("body *:not(#printbody,#printbody *)").addClass("off");
window.print();
$("#printbody").remove();//印刷用bodyを削除
$(".off").removeClass("off");//非表示クラスを削除
});

これだけでOKです。


■解説


印刷時のみ読み込まれるCSSでdisplay:noneを指定した要素は、印刷時には非表示になることは以前書きました。
しかし、この方法では、印刷する要素がbody>div>div...のように、入れ子になっている場合、適用することが難しく、動的ページでは実用的な方法とは言えません。

そこで、CSSの指定を動的に行ってしまおうというのが今回の方法です。

idがprintbodyのdivをbody直下に作り、その中に印刷する要素の中のhtmlをコピーします。
そして#printbody以外の要素に、全て印刷時に非表示とされる.offクラスを指定します。

印刷の処理であるwindow.print()をかけた後、追加されたoffを全て削除し、
#printbodyも削除します。これで印刷ボタンをクリックする前の状態に戻ります。

ちなみに、動作確認はchromeでしかしてませんのであしからず・・・


ウェブアプリケーションで印刷機能が必要な場合なんかにどうぞ。

コメント

人気の投稿