TAG印刷
印刷範囲を指定した印刷ボタンの実装方法：javascript
シェア
ツイート
最終更新日：
通常の印刷ボタンではサイト全体の印刷になってしまいますが、
部分的に印刷したい場合に印刷範囲を指定した印刷ボタンの実装方法をメモ。
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);
}
$(function(){
$('#btn_print').click(function(){
$.jPrintArea("#printarea");
});
});
と記載します。
※#btn_print、#printareaの箇所は任意に変更
あとは印刷ボタンを設置したい箇所に
<a href="javascript:void(0);" id="btn_print">印刷する</a>
印刷範囲を
<div id="printarea">ここに印刷範囲のコンテンツを記載</div>
でOK
JavaScriptのおすすめ参考書
ポチップ
ポチップ
