MENU
コンテンツ再構築中

HTML5: Web アプリ・サイトに印刷ボタンを設置する

クラウドストレージや PDF によりペーパーレス化が進んだ昨今ですが、プレゼンや各資料作成等で情報をプリントアウトしなければいけない場面もあるかと思います。

今回は Web アプリや Web サイトに、プリントボタンを設置したい場合の方法を説明したいと思います。

INDEX

目次

  • Web アプリ・サイトに印刷ボタンを設置する
  • まとめ

Web アプリ・サイトに印刷ボタンを設置する

JavaScript から print() を実行することで、ブラウザのプリントプロパティ画面を呼び出すことができます。
※現時点で Safari は動作しません

JavaScript

[code]
window.print();
[/code]

Bootstrap ボタン

[code]









[/code]

a タグ

[code]
印刷する
[/code]

input タグ

[code]



[/code]

まとめ

アプリ設計時に、あらかじめ印刷時のスタイル(print.css)をデザインする必要がありますが、印刷ボタンを準備しておけば、アプリやサイト利用者のユーザビリティが向上します。

利用する場面は限られてしまいますが、あれば喜ばれる機能の一つだと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Please share it!
  • URLをコピーしました!
  • URLをコピーしました!
INDEX