jQueryで印刷用ページを展開する

jQuery2011年5月4日

印刷用のページをJavascriptで展開することで、現在見ているページをそのまま印刷するか、もしくは余分な要素を省いた内容を印刷するか、といった2つの選択肢をユーザーに持たせることができます。
ここではjQueryで印刷用ページを立ち上げるスクリプトをご紹介します。

• jQueryはこちらからダウンロード
• 実際のサンプル（印刷用ページが立ち上がります）

HTML

<ul class="list-link-01">
<li><a href="#" id="print-trigger">実際のサンプル（印刷用ページが立ち上がります）</a></li>
</ul>

Javascript

'jQuery' in window && (function($) {
$(function() {
$('#print-trigger').each(function(){
var $obj = $(this);
var $winWidth = '760';
var $winHeight = '600';
var $url = location.pathname;
$obj.attr('href', $url + '?print');
$obj.click(function(){
window.open($obj.attr('href'), "print", "width=" + $winWidth + ", height=" + $winHeight + ", top=85, left=150, scrollbars, resizable, locationbar, menubar, status, toolbar");
return false;
});
});

//印刷ページを展開
if (location.search == "?print") {
var printCssPath = "/shared/css/print.css";
$("head").append('<link rel="stylesheet" type="text/css" media="screen, print" href="' + printCssPath + '">'');
}
});
})(jQuery);

解説

挙動としては、id="print-trigger"が付与されているa要素をクリックすると、印刷用ページが別ウィンドウで立ち上がります。前半部分でウィンドウサイズやロケーションバーの有無等を設定し、「?print」という文字列をhrefに追加しています。
後半部分では、読み込む印刷用CSSの設定をします。ここでは、「?print"」という文字列が見つかった場合に、/shared/css/print.cssを読み込み、</head>のすぐ手前で印刷用CSSを読み込む、といったことをしています。

• jQueryを他のライブラリと競合させないための方法
• jQueryでアクセシブルなプルダウンメニューを実装

この記事を読んでいる方にオススメの記事

• jQueryはじめてのjQuery
• jQuery今更聞けない！jQueryではじめるJavascript超初心者講座
• jQueryグローバルナビゲーションのカテゴリを自動でアクティブにする
• jQuery超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
• jQueryナビゲーションのカテゴリを自動でアクティブにする（テキスト版）
• jQueryニュースティッカーをjQueryで実装する／フルスクラッチ編

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。