JavaScript の window.print() 関数を使うと、印刷ダイアログを表示することができる。

現在の文書を印刷するための印刷ダイアログを開きます。

window.print - DOM | MDN

ブラウザによっては、印刷ダイアログ表示前に window.onbeforeprint 関数が呼ばれて、ダイアログを閉じたら window.onafterprint が呼ばれる。

さいきんは iPhone や iPad でも AirPrint という印刷機能があるので、ちゃんと印刷機能への状態遷移をしてくれる。ただし、 onbeforeprint や onafterprint は iOS の Safari ではコールされなかった (iOS 7 で確認)。

サンプルコード。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript で印刷ダイアログを表示するサンプル</title>
<script>
window.onbeforeprint = function(){
  alert("window.onbeforeprint");
}
window.onafterprint = function(){
  alert("window.onafterprint");
}
</script>
</head>
<body>
<h1>JavaScript で印刷ダイアログを表示するサンプル</h1>
<div>
<button type=button onclick="alert('window.print'); window.print();">window.print()</button> 
</div>
</body>
</html>

onbeforeprint や onafterprint には Event オブジェクトが渡されるみたいだけど、ブラウザによって違うのかもしれない。 そのへんの情報を表示できるようなサンプルも書いてみた。
⇒ JavaScript sample : window.print, window.onbeforeprint, window.onafterprint

tags: JavaScript printing

Posted by NI-Lab. (@nilab)