スライドショー

【JavaScript入門】printメソッドで印刷する方法(印刷ボタン/リンク)

こんにちは!エンジニアの中沢です。

JavaScriptには印刷するための「printメソッド」があります。

画面に印刷ボタンや印刷のリンクを作れるので、上手く活用してください。

この記事では、

・JavaScriptの印刷とは
・printメソッドで印刷する方法

という基本的な内容から、

・印刷ボタンを設置する方法
・印刷のリンクを設置する方法

などの応用的な使い方に関しても解説していきます。

今回はこれらの方法を覚えるために、printメソッドのさまざまな使い方をわかりやすく解説します!

JavaScriptの印刷とは

JavaScriptを使って印刷するには、printメソッドを使います。

printメソッドを使えば印刷画面が開き、そこから印刷することができます。

printメソッドをボタンリンクに使えば、印刷ボタンや印刷のリンクを作成することもできます。

この記事では、printメソッドの様々な使い方を解説していきます。

printメソッドで印刷する方法

ここでは、画面を印刷する方法を解説します。

画面を印刷するには、printメソッドを使います。

印刷はprintメソッドを1行で記述するだけなので、簡単に印刷することができます。

次のプログラムで確認してみましょう。

window.print();

これだけで印刷画面が開き、画面を印刷することができます。

印刷ボタンを設置する方法

ここでは、印刷ボタンを設置する方法を解説します。

印刷ボタンを設置するには、ボタンの「onclickイベント」にprintメソッドを指定します。

次のコードで確認してみましょう。

<input type="button" value="印刷" onclick="window.print();" />

実行結果:

このようにして、印刷ボタンを設置することができました。

印刷のリンクを設置する方法

ここでは、印刷のリンクを設置する方法を解説します。

印刷のリンクを設置すれば、リンクをクリックして印刷画面を開くことができます。

次のコードで確認してみましょう。

<a href="#" onclick="window.print(); return false;">印刷</a>

実行結果:

これで印刷のリンクを表示することができます。

まとめ

いかがでしたか?

今回は画面を印刷する方法を解説しました。

画面の印刷はボタンやリンクからでもできるので、ぜひ活用してくださいね。

もし、画面を印刷する方法を忘れてしまったらこの記事を確認してください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説