Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

「このページを印刷」ボタンを作る

JavaScriptを使うと、クリックするとブラウザの印刷ダイアログが開くボタンを作ることができます。
わざわざ印刷ボタンなど作らなくても、ブラウザのメニューやツールバーなどから「印刷」を選べば印刷できるわけですが。メニューやツールバーなどを非表示にした、小さなサブウインドウを開いていて、そのページを印刷させる必要があるようなときには便利かも知れません。(^_^;)

JavaScriptで、印刷させるのは非常に簡単で、以下のように記述するだけです。

window.print();

windowオブジェクトのprintメソッドを呼ぶだけです。これだけで印刷(ダイアログの表示)ができます。
これを使って、「このページを印刷」ボタンを作るには、HTMLを以下のように書けば良いでしょう。

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

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

「このページを印刷」ボタンをクリックすると、ブラウザの印刷ダイアログが表示されるはずです。
(閲覧環境にプリンタがセットアップされていない場合は、ブラウザによってはエラーを表示して印刷ダイアログは表示しません。)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど