にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

「このページを印刷」ボタンを作る方法 [機能]

表示中のウェブページを印刷させるための印刷画面をJavaScriptで出すには、window.print();を使います。この機能を使えば「このページを印刷」ボタンを作っておいて、ボタンクリックでページを印刷させるようにすることも可能です。印刷を前提にしたウェブページではこのようなボタンを掲載しておくと便利です。

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

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で解説している「印刷時にのみ有効になるスタイルを作る」をご参照下さい。画面表示時にはサイドバーなど様々な要素を普段通りに表示しておきつつ、印刷する場合にはメインコンテンツだけが印刷されるようにする……といった工夫も可能です。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---