指定したHTML要素だけを印刷するjavascriptを書いてみた

jQueryを使うものはネットにあったのですが、このためだけにjQuery入れるのもどうかな〜と思ったので、javascriptだけで簡単に書いてみました。

スポンサーリンク
AMP広告用336x280Adsense

用意するjavascript

htmlのヘッダー部分か、jsファイルにこのfunctionを追加してください。サブウィンドウを開いて印刷画面を表示します。

function printArea(id){
	
	var area = document.getElementById(id).outerHTML;
	
	var head = '';
	var cmd = '<script>window.print();</script>';
	
	var links = document.getElementsByTagName('link');
	for (var i=0; i<links.length;i++){
		head = head + links[i].outerHTML;
		console.log(links[i].outerHTML);
	}
	var styles = document.getElementsByTagName('style');
	for (var i=0; i<styles.length;i++){
		head = head + styles[i].outerHTML;
		console.log(styles[i].outerHTML);
	}
	
	var sub = window.open();
	sub.document.write('<html><head>'+head+'</head><body>'+area+cmd+'</body></html>');
	
}

ポイントはこちらの2点

  1. 呼び出し元のHTMLからスタイルシート情報(link、style)タグを取得して、画面に表示されている通りのレイアウトを維持する
  2. サブウィンドウへのHTML出力の最後でwindow.print();を呼び出して、印刷画面を表示

画面の表示と印刷でスタイルを変えたいときは、getElementsByTagNameでスタイルを読みとっている部分を適当に変えてみてください。

呼び出し方

リンクなどでjavascriptを呼び出してみてください。印刷したい要素にidを割り当てて、printAreaにidを指定します。ブラウザごとにサブウィンドウ起動の可否が違うので、重要なシステムではテストを入念に行ってください。

<a href="javascript: printArea('printarea')">印刷する</a>
<div id="printarea">
<table>
<tr><th>ヘッダ</th><td>データ</td></tr>
<tr><th>ヘッダ</th><td>データ</td></tr>
</table>
</div>

実際に動かしてみる

何故かWordPressで動かすとWordPressのcssがちゃんと読み込めなくて、テーブルのスタイルが真っ白になっちゃうんですが、まぁこんな感じでうごきますよっと。

印刷する

ヘッダ データ
ヘッダ データ

スポンサーリンク
AMP広告用336x280Adsense
AMP広告用336x280Adsense

フォローする