JavaScript【 print 】 ~ 画面印刷

Working copier printer with paper document .

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 つのメディアに対して スタイルを指定することで、指定印刷を実現しています。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です