印刷を前提にしたページでは、印刷ボタンをウェブページ上に掲載しておくと便利

JavaScriptを使うと、ブラウザに内蔵されている印刷ダイアログを開くことができます。
例えば、ボタンをクリックすると印刷画面が開くような機能を用意できます。

わざわざ印刷ボタンなど作らなくても、ブラウザのメニューやツールバーなどから「印刷」を選ぶなり、[Ctrl]＋[P]キーを押すなりすれば印刷できるわけですが。しかし、最近のブラウザは省スペース化のためか「印刷」ボタンが標準では見えないケースが多いですよね。
また、メニューやツールバーなどを非表示にした「小さなサブウインドウ」を開いていて、そのページを印刷させる必要があるときにも便利でしょう。
なので、印刷を前提にしているようなウェブページでは、ウェブ上にも「印刷」ボタンを配置しておくと便利です。

※例えば、Amazonの領収書表示ページでは、印刷リンクが掲載されています。それを押すだけで印刷ダイアログが開くので、ブラウザのメニューを使わずに済んで楽です。

JavaScriptで印刷ダイアログを出す方法

JavaScriptで印刷ダイアログを出すのは非常に簡単で、以下のように記述するだけです。

window.print();

windowオブジェクトのprintメソッドを実行するだけです。これだけで印刷ダイアログの表示ができます。
いきなり印刷が始まるわけではないので安心して下さい。
あくまでも、ブラウザ内蔵の印刷画面が表示されるだけです。ユーザは、そこからプリンタを選んだり用紙を選んだりできます。

※閲覧者の環境にプリンタが1つもセットアップされていない場合は、ブラウザによってはエラーを表示して印刷ダイアログは表示されないことがあります。(その場合はエラーの有無に関係なく、どちらにしても印刷できないので、気にする必要はないでしょうが。^^;)

JavaScriptで印刷ダイアログを出す表示例

これを使って「このページを印刷」ボタンを作るには、HTMLとJavaScriptを以下のように書けば良いでしょう。onclick属性の中にJavaScriptを直接記述しています。

<input type="button" value="このページを印刷" onclick="window.print();">

ボタンではなく、リンクの形で作りたい場合は、以下のように書けます。

<a href="#" onclick="window.print(); return false;">このページを印刷</a>

上記のHTML＆JavaScriptを表示すると、以下のようになります。

「このページを印刷」ボタンやリンクをクリックすると、ブラウザの印刷ダイアログが表示されるはずです。これで、閲覧者にブラウザのメニューを操作させることなく、簡単に印刷させることができます。

ちなみに、画面(ブラウザのウインドウ内)に表示される装飾と、実際に印刷される装飾を別々にデザインしたい場合は、CSS Tipsで解説している「印刷時にのみ有効になるスタイルを作る」をご参照下さい。画面表示時にはサイドバーなど様々な要素を普段通りに表示しておきつつ、印刷する場合にはメインコンテンツだけが印刷されるようにする……といった工夫も可能です。

(更新日：2017年06月05日)