window.print メソッドを使用すると、Webページを印刷することができます。
今回は、window.print メソッドを使用して、Webサイトの画面印刷をする方法について紹介します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
print メソッドは、Windowオブジェクトのメソッドで、ブラウザの印刷ダイアログを呼び出します。
次のように記述して使用します。
window.print();
また、script 要素内（ <script> ～ </script> ）に記述する場合は、下記のように「 window. 」を省略することもできます。
次のように記述して使用します。
print();
次のサンプルは、現在開いている画面を印刷するプログラムです。
印刷ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<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>
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 つのメディアに対して スタイルを指定することで、指定印刷を実現しています。
INTERNOUS,inc. All rights reserved.
