HTMLでWEBページの印刷ボタンを作る方法を解説!

WEBサイトへ印刷ボタンを設置する方法をご紹介します。HTMLのonclick属性を使って既に定義してあるメソッドを呼び出すのでJavascriptを書く必要はありません。とても簡単なので使いやすいWEBサイトにするためにも、ぜひ挑戦してみてください。

コンテンツ [表示]

  1. 1HTMLでWEBページの印刷ボタンを作る方法
  2. 1.1HTMLのinput要素で印刷ボタンを実装する
  3. 1.2HTMLのa要素で印刷ボタンを実装する
  4. 2印刷ボタンでPDF保存もできる
  5. 3まとめ

実は意外とWEBサイトを印刷したい状況はあります。

上司から、「会議で使うからこのWEBサイト印刷しておいて!」などなど・・・

そんなユーザーのために、今回はWEBサイトへ印刷ボタンを設置する方法をご紹介します。
サンプルコードもあるので、ユーザーの使いやすいWEBサイトやアプリケーションのためにどんどん使っていきましょう!

Photo bybertholdbrodersen

HTMLでWEBページの印刷ボタンを作る方法

実装方法については、HTMLのonclick属性(clickイベント)を使って、すでにJavasciprtで定義されているメソッドを呼び出すだけなのでとっても簡単に実装できます。

つまり新しくプログラムを組む必要がないということですね!

それでは実際にサンプルコード見ていきましょう。

HTMLのinput要素で印刷ボタンを実装する

HTMLのinput要素で印刷ボタンを実装する方法です。

サンプルコードを見てみましょう。

【HTML】HTMLでWEBページの印刷ボタンを作る方法を解説!

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

普通のinput要素でボタンを実装する方法ですが、onclick属性が追加されてます。
このonclick属性値の値が印刷を命令しています。

属性値のwindow.print()がWEBサイトに対して印刷を命令しています。

印刷ボタンをクリックすると、どうなるのか実際にプレビューを見てみましょう。

あわせて読みたい
onclick属性
HTMLのonclick属性は全ての要素に設定できるグローバル属性でユーザーのクリックの操作で処理が走るイベントハンドラ属性の1つです。onclick属性の使い方をサンプルコード付きで解説します。

HTMLのa要素で印刷ボタンを実装する

HTMLのa要素で印刷ボタンを実装する方法です。

サンプルコードを見てみましょう。

【HTML】HTMLでWEBページの印刷ボタンを作る方法を解説!

<a href="javascript:void(0)" onclick="window.print();return false;">このページを印刷する</a>

こちらもa要素にonclick属性が追加されておりwindow.print()がWEBサイトに対して印刷を命令しています。

input要素と違い、return false;が追加されています。
これは、href属性値のjavascript:void(0)と同様でページの遷移を無効化しています。

あわせて読みたい
JavaScript: void(0)の意味とは?代替手段も紹介!のイメージ
JavaScript: void(0)の意味とは?代替手段も紹介!
aタグのhref属性に設定されているJavaScript: void(0)の意味について解説します。またリンクを無効化させるvoid(0)の代替手段についてもサンプルコード付きで解説します。

印刷ボタンをクリックすると、どうなるのか実際にプレビューを見てみましょう。

印刷ボタンでPDF保存もできる

印刷ボタンをクリックしたあとに表示されるダイアログからPDF形式のデータを保存をすることもできます。

Google Chrome

Google Chromeで、印刷ダイアログを表示後に送信先をPDF保存にします。

Microsoft Edge

Microsoft Edgeで、印刷ダイアログを表示後にプリンターをPDFとして保存にします。

FireFox

FireFoxで、印刷ダイアログを表示後にプリンターの選択をMicrosoft Print to PDFにする

これは便利ですね!

もちろん、利用している環境によっては出来ないこともあるので注意してください。

まとめ

いかがでしたでしょうか?

印刷ボタンは、とっても簡単にユーザーに対して親切なユーザビリティを提供することができます。

使いやすいWEBサイトやアプリケーションを目指してぜひ、みなさんも実装してみてくださいね!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

Qumeru事務局
ライター

Qumeru事務局