ITコラム

Working copier printer with paper document .

JavaScript

2017.12.08

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.