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

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

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

目次

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

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

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

JavaScript

window.print();

Bootstrap ボタン

<button type="button" class="btn btn-primary" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-secondary" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-success" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-danger" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-warning" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-info" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-light" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-dark" onclick="window.print();">印刷する</button>
<button type="button" class="btn btn-link" onclick="window.print();">印刷する</button>

a タグ

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

input タグ

<form>
<label>印刷:</label>
<input type="button" value="印刷する" onclick="window.print();">
</form>

まとめ

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

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents