[sourcecode language=”java”]
$(document).ready(function(){
$(".printer").click(function(){
$("body").addClass("print");
window.print();
var timeout = setTimeout(function(){
$("body").removeClass("print");
}, 1000);
return false;
});
});
[/sourcecode]
Webページを印刷するとき、画面に表示されているそのままを印刷したいと思うか、印刷用に整形された状態を欲しいと思うかは、ユーザーによってまちまちです。
上のjQueryプラグインを使うことで、ブラウザのメニューバーから「印刷」を選んだ時と、ページ上の印刷ボタンから印刷を実行した時で、別々の出力結果を得ることが出来るようになります。つまり、前者は見たままに、後者は整形されて印刷されます[1]。
まず、print.cssを用意します
[sourcecode language=”css”]
@media print {
body.print div.header-search,
body.print div.nav,
body.print div.aside { display: none; }
body.print div.header,
body.print div.contents,
body.print div.article,
body.print div.footer { clear: both; width: auto; height: auto; float: none; background: none; border: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; position: static; }
body.print { font-size: 9pt; background: none; }
body.print div.body { width: 500px; margin: 0 auto; }
}
[/sourcecode]
print.cssの内容全体を@media print { }でくくる
print.cssの各行の先頭にbody.printを追加する
この2点を加えることで、ここで記述した内容は画面表示には一切影響を与えなくなり、且つ、body classに”print”が付いていない場合はスタイルが適応されることもなくなります。
[sourcecode language=”java”]
$(document).ready(function(){
$(".printer").click(function(){ // 印刷ボタンが押されたら
$("body").addClass("print"); // body classに"print"を追加
window.print(); // 印刷を実行
var timeout = setTimeout(function(){
$("body").removeClass("print"); // body classから"print"を削除
}, 1000);
return false; // 終了
});
});
[/sourcecode]