HTMLでWEBページの印刷ボタンを作る方法を解説！
WEBサイトへ印刷ボタンを設置する方法をご紹介します。HTMLのonclick属性を使って既に定義してあるメソッドを呼び出すのでJavascriptを書く必要はありません。とても簡単なので使いやすいWEBサイトにするためにも、ぜひ挑戦してみてください。
実は意外とWEBサイトを印刷したい状況はあります。
上司から、「会議で使うからこのWEBサイト印刷しておいて！」などなど・・・
そんなユーザーのために、今回はWEBサイトへ印刷ボタンを設置する方法をご紹介します。
サンプルコードもあるので、ユーザーの使いやすいWEBサイトやアプリケーションのためにどんどん使っていきましょう！
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サイトに対して印刷を命令しています。
印刷ボタンをクリックすると、どうなるのか実際にプレビューを見てみましょう。
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)と同様でページの遷移を無効化しています。
印刷ボタンをクリックすると、どうなるのか実際にプレビューを見てみましょう。
印刷ボタンでPDF保存もできる
印刷ボタンをクリックしたあとに表示されるダイアログからPDF形式のデータを保存をすることもできます。
Microsoft Edgeで、印刷ダイアログを表示後にプリンターをPDFとして保存にします。
FireFoxで、印刷ダイアログを表示後にプリンターの選択をMicrosoft Print to PDFにする
これは便利ですね！
もちろん、利用している環境によっては出来ないこともあるので注意してください。
まとめ
いかがでしたでしょうか？
印刷ボタンは、とっても簡単にユーザーに対して親切なユーザビリティを提供することができます。
使いやすいWEBサイトやアプリケーションを目指してぜひ、みなさんも実装してみてくださいね！
Google Chromeで、印刷ダイアログを表示後に送信先をPDF保存にします。