【簡単】HTMLで印刷ボタンを作成する方法【コピペOK】

パソ君

・印刷画面を呼ぶためのボタンってHTMLで作成できる？

こんな疑問にお答えします。

実はHTMLで、印刷する用のボタンを作成することが可能です。

それもHTMLのみのコードで対応できます。

結構簡単に実装できるので覚えておくべし！

ジト

すぐにできるよ！

ということで、この記事では「HTMLで印刷ボタンを作成」について解説していきます！

【簡単】HTMLで印刷ボタンを作成【コピペOK】

そんな印刷ボタンのサンプルがこちら↓

See the Pen 印刷用のボタンHTMLで作成 by jito-coder (@jito-coder) on CodePen.

<!-- buttonタグ -->
<button type="button" onclick="window.print();">buttonで印刷画面へ</button>

<!-- aタグ -->
<a href="javascript:void(0)" onclick="window.print(); return false;">aタグで印刷画面へ</a>

<!-- inputタグ -->
<input type="button" value="inputで印刷画面へ" onclick="window.print();">

３つのサンプルボタンを作成しました。

順に簡単に説明していきます。

➀：印刷用ボタン：buttonタグ

<button type="button" onclick="window.print();">buttonで印刷画面へ</button>

buttonタグでは「onclick=”window.print();」を使用して、印刷画面になるよう実装しております。

「cursor: pointer;」を指定して、クリックできるように見せるのが良いでしょう。

➁：印刷用ボタン：aタグ

<a href="javascript:void(0)" onclick="window.print(); return false;">aタグで印刷画面へ</a>

aタグでは「onclick=”window.print();」を使用して、印刷画面になるよう実装。

ただそれだけではクリック後、ページトップに遷移してしまいます。

対策としてhrefの値に「javascript:void(0)」を記述、onclickの値に「return false;」を記述。

これで遷移せずに、印刷画面を反映することができます。

➂：印刷用ボタン：inputタグ

<input type="button" value="inputで印刷画面へ" onclick="window.print();">

inputタグでは「onclick=”window.print();」を使用して、印刷画面になるよう実装しております。

「cursor: pointer;」を指定して、クリックできるように見せるのが良いでしょう。

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙

【簡単】HTMLで印刷ボタンを作成【コピペOK】：まとめ

ジト

HTMLで印刷ボタンを作成する時はためしてみてね！