どーも。谷です。
最近いくつかのWEBサイト制作案件で、印刷画面のご要望を頂きました。印刷のためだけにページのテンプレートを用意するのも手間なので、簡単に指定範囲のみ印刷できるという噂のjQueryプラグイン「jPrintArea.js」を使ってみました。
何年も前からよく使われているもののようですが、本家サイトからは既に削除されているので、使ってみたい方はこちらのコードをコピーして、「jQuery.jPrintArea.js」と名前をつけて保存してください。
jQuery(document).ready(function($){ $.jPrintArea=function(el){ var iframe=document.createElement('IFRAME'); var doc=null; $(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;'); document.body.appendChild(iframe); doc=iframe.contentWindow.document; var links=window.document.getElementsByTagName('link'); for(var i=0;i<links.length;i++) if(links[i].rel.toLowerCase()=='stylesheet') doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>'); doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>'); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); alert('指定された範囲のみプリントします'); document.body.removeChild(iframe); } });
jPrintAreaの設定方法
保存した「jQuery.jPrintArea.js」をアップロードし、jQueryの記述後に、head内で呼び出します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jQuery.jPrintArea.js"></script> <script> $(function(){ $('#btn_print').click(function(){ $.jPrintArea("#printarea"); }); }); </script>
WORDPRESSで使うときは、「wp_head()」でjQueryライブラリがコールされていることがほとんどなので、「wp_head()」の後に、以下のようにして記述します。
<script src="js/jQuery.jPrintArea.js"></script> <script> jQuery(document).ready(function($){ $('#btn_print').click(function(){ $.jPrintArea("#printarea"); }); }); </script>
WordPressでjQueryを使う場合は、関数の書き出しに注意が必要です。
詳しくは → WordPressでのダメなjQuery関数の囲み方4パターンと対策講座
印刷したい範囲をidで囲う
<div id="printarea"> ~印刷したい内容~ </div>
印刷ボタンを用意する
印刷ボタンには、id「btn_print」をつけます。
■idをつけたinputタグを使う場合
<input type="button" id="btn_print" value="印刷する">
■画像やテキストをボタンにする場合
<a href="#" id="btn_print">印刷する</a>
印刷ボタンをクリックすると、id=printareaで囲った部分のみが印刷されます。
ブラウザによって多少動きは異なりますが、一通りのブラウザで問題なく動きました。
ダイアログ部分の表示変更
クリックするとダイアログが表示され、コメントを入れられます。
コメントは
alert('指定された範囲のみプリントします');
この部分で内容に合わせて調整して下さい。
ダイアログを表示させたくない場合は、jQuery.jPrintArea.jsを以下のコードに差し替えて下さい。
jQuery(document).ready(function($){ $.jPrintArea=function(el){ var iframe=document.createElement('IFRAME'); var doc=null; $(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;'); document.body.appendChild(iframe); doc=iframe.contentWindow.document; var links=window.document.getElementsByTagName('link'); for(var i=0;i<links.length;i++) if(links[i].rel.toLowerCase()=='stylesheet') doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>'); doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>'); doc.close(); iframe.contentWindow.focus(); setTimeout(function(){ iframe.contentWindow.print(); document.body.removeChild(iframe); }, 500); } });
印刷部分のスタイルシート調整
印刷ボタンをクリックすると、#printareaで囲われた要素のみが切り抜かれて、印刷されます。
そのためCSSの記述は、#printarea内のタグに直接適用しないと、印刷時には反映されません。
たとえば、こんな構成だったとします。
印刷時には、#printarea部分のみが切り取られて印刷されるため、親要素である#contentから記述されたCSSは印刷時に反映されません。
印刷時に適用させたいCSSは、#printarea以下のタグに指定します。
/* ↓印刷時には適用されない */ #content p { text-align: center; } /* ↓印刷時にも適用される */ p { text-align: center; }
これを逆手に取れば、印刷時に特定の部分だけ非表示にしたりすることもできます。
たとえば、
・印刷時には画像を非表示。
・印刷時には文字を大きくして、中央揃えにする。
この場合、以下のように記述します。
/* ↓印刷時には画像を非表示 */ img { display: none; } /* ↓通常時には画像を表示させる */ #content img { display: block; } /* ↓印刷時のテキスト指定 */ p { font-size: 2em; text-align: center; } /* ↓通常時のテキスト指定 */ #content p { font-size: 1em; text-align: left; }
今回はシンプルに書きましたが、CSSがごちゃごちゃしてわかりにくくなったりしないように、実際に使うときは、idやclassをうまく使って綺麗にまとめましょう。!importantを使ったりしてもうまくまとまると思います。
親要素の指定と、#printarea以下の指定をうまく使い分けて対応することで、印刷時のレイアウトも細かく調整できます。
非常に便利なので、使って見てください。
それでは。