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

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

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

サマリー

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

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

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

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

２．使ってみる

下記はjQuery2.1.0で動作確認済み（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);
}

（２）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");
  });
});

（３）印刷ボタン（またはリンク）を設置
idを指定し（２）で書いた要素名とあわせておく。

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

または

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

（４）印刷範囲をid指定する

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

３．感想

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

TechNote

事務屋のおぼえがき

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

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

２．使ってみる

３．感想

あわせて読みたい

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

２．使ってみる

３．感想

あわせて読みたい

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