印刷用のプラグイン
jQueryUIのダイアログに表示されているものをブラウザの機能を使って印刷しようとしたんだけど、ダイアログの裏側のものまで印刷されてしまう。CSSでなんか出来るっぽいんだけどよくまとまった情報がなかったのでjQueryのプラグインを探してみた。そしたら、printAreaっていうプラグインが見つかった。
http://plugins.jquery.com/project/PrintArea
まず、画面の以下の部分を印刷したいとする(ここでは一部だけしか載せてないけど、ナビゲーションメニューやいろいろな要素がごちゃごちゃあり)
次に「このページを印刷」リンクをクリックすると、以下のようなサブウィンドウに指定された部分の要素だけが表示され、同時に印刷用のダイアログが開く。あとは印刷ってやるだけ。
使い方は印刷したい要素を指定し、printAreaを呼ぶだけ。(サブウィンドウを表示するもので)一番簡単なコードは以下のようになる。
$('#print_area').printArea({ mode: 'popup' });
modeにpopupを指定することで今回のようにサブウィンドウが表示される。指定しないとサブウィンドウは開かれずに、印刷ダイアログのみが表示される。そのほかのオプションはソースコードの先頭に書いてあるのでそちらを参照ってことで。
ちなみにこのサンプルのコードはこんな感じ。まずはHTML
<a href="" id="print">このページを印刷</a> <div id="print_area"> <table class="basic_table"> <thead> <tr> <td>ID</td> <td>氏名</td> <td>住所</td> <td>メール</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>佐藤太郎</td> <td>東京都千代田区</td> <td>sato@example.com</td> </tr> <tr> <td>2</td> <td>鈴木太郎</td> <td>東京都渋谷区</td> <td>suzuki@example.com</td> </tr> <tr> <td>3</td> <td>佐々木一郎</td> <td>東京都練馬区</td> <td>sasaki@example.com</td> </tr> <tr> <td>4</td> <td>斉藤次郎</td> <td>神奈川県</td> <td>saito@example.com</td> </tr> </tbody> </table> </div>
JavaScriptはこんだけ。便利だねー。
// 「このページを印刷」リンクにイベントを追加 $('#print').click(function() { // テーブルの部分を印刷するように指定 $('#print_area').printArea({ mode: 'popup' }); return false; });
ほかにも印刷用のプラグインいくつかあるみたいだけど、これで事足りたので見てないです。もっとカッコイイのあればだれか教えて。