JavaScript【 print 】 ～ 画面印刷

window.print メソッドを使用すると、Webページを印刷することができます。
今回は、window.print メソッドを使用して、Webサイトの画面印刷をする方法について紹介します。

目次

　
1. print メソッド
2. 画面印刷
3. 印刷指定

1. print メソッド

　
print メソッドは、Windowオブジェクトのメソッドで、ブラウザの印刷ダイアログを呼び出します。

次のように記述して使用します。

window.print(); 

また、script 要素内（ <script> ～ </script> ）に記述する場合は、下記のように「 window. 」を省略することもできます。
次のように記述して使用します。

print(); 

▲目次へ戻る

　

2. 画面印刷

　
次のサンプルは、現在開いている画面を印刷するプログラムです。
印刷ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function printWeb() {
    print();
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="button" value="印刷" onClick="printWeb()">　　
</div>

単に print メソッドを記述するだけで、自画面の印刷ダイアログが表示されます。
　
次のソースコードでも 同様の結果が得られます。

<div style="background-color : #CCC;">
    <input type="button" value="印刷" onClick="window.print();">　　
</div>

print メソッドを スクリプト要素の外に記述する場合は、「 window. 」を省略せずに上記のように記述します。
　
　
また、ボタン以外に リンクから印刷ダイアログを表示させることもできます。
印刷リンクをクリックしてみて下さい。

　
ソースコードは次の通りです。

<div style="background-color : #CCC;">
    <a href="#" onclick="window.print();">印刷</a>　　
</div>

▲目次へ戻る

　

3. 印刷指定

　
JavaScript ではありませんが、印刷に不要な部分を非表示にするなど、印刷内容を指定することができます。

印刷内容の設定は、次のように CSS で行います。

<style type="text/css">
<!--

/* 印刷をしない */
@media print{
  .noPrint{display:none;} 
}

/* 画面表示をしない */
@media screen{
  .noScreen{display:none;} 
}

/* 画面表示も印刷もしない */
@media screen,print{
  .noScreenPrint{display:none;}
}

-->
</style>

<div class="noPrint">
    ここは、画面表示されますが印刷されません
</div>

<div class="noScreen">
    ここは、画面表示されませんが印刷されます
</div>

<div class="noScreenPrint">
    ここは、画面表示も印刷もされません
</div>

<input type="button" value="印刷" onclick="window.print();">

　
CSSでは @（アットマーク）の記号を使った指定方法がいくつかあり、「 @media 」もそのうちの 1 つです。

@media を使うと、特定のメディアに対して、スタイルを指定することができます。
カンマ（ , ）で区切ることによって、メディアを複数指定することもできます。

上記のソースコードでは、「 print 」と「 screen 」の 2 つのメディアに対して スタイルを指定することで、指定印刷を実現しています。

▲目次へ戻る