TechNote

とあるエンジニアのただのメモ

指定範囲を簡単に印刷するjQueryプラグイン jPrintArea.js が便利な件

Webサイトの印刷機能をつくるのに最も手軽なjQueryプラグインjPrintAreaを使ってみたのでメモ。

f:id:kojikoji75:20140206211710j:plain
photo credit: driek via photopin cc


サマリー

1.指定範囲を簡単に印刷するjQueryプラグインjPrintArea.jsとは
2.使ってみる
3.感想



1.指定範囲を簡単に印刷するjQueryプラグインjPrintArea.jsとは


jQuery.jPrintArea.jsは、少しコードを書き足すだけで指定範囲のみを印刷できるというお手軽プラグインです。

Web界隈では何年も前から「簡単で便利」と評されながら、本家サイトからもかなり前から姿を消している貴重なプラグインである模様。手軽さゆえに重宝されていたのか、本家サイトから消えた後も、いくつかのブログにコードが載せてあるのも見かけたが、試してみると動くものがなかなかない。下記はちゃんと動きます。



2.使ってみる


下記はjQuery2.1.0で動作確認済み(1系でも当然いけました)。


(1)本家にはないので、以下のコードをコピペして、「jQuery.jPrintArea.js」などの名前で保存。

$.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('Printing...');
document.body.removeChild(iframe);
}

 


(2)head内で読み込む

<script type="text/javascript" src="lib/jquery-2.1.0.js"></script>
<script type="text/javascript" src="lib/jquery.jPrintArea.js"></script>
<script text="javascript/text">
$(function(){
  $('#btn_print').click(function(){
    $.jPrintArea("#printarea");
  });
});


(3)印刷ボタン(またはリンク)を設置
idを指定し(2)で書いた要素名とあわせておく。

<input type="button" id="btn_print" value="範囲印刷">

または

<a href="#" id="btn_print">範囲印刷</a>

 

(4)印刷範囲をid指定する

<div id="printarea">
	囲まれた範囲が印刷される。
</div>

 


3.感想

評判通り簡単に指定範囲印刷の実装ができるので、こだわりがない場合はこれで十分。それにしても、一通り検索したつもりだが印刷用プラグインはあまり存在しないように感じた。そもそも印刷機能自体の需要があまりないのかな?


あわせて読みたい

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNotejQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など...

jQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法 - TechNotejQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法 - TechNote

よくWebサイト上で見かける、画面をスクロールしていくとフワッと画像が現れてくるあの小技です。いつか自分も使う機会があったら使ってみようと思っていましたが、本日...


jQuery最高の教科書

jQuery最高の教科書

jQueryデザインブック 仕事で絶対に使うプロのテクニック

jQueryデザインブック 仕事で絶対に使うプロのテクニック