【JavaScript入門】print()メソッドの使い方をわかりやすく解説!

こんにちは!エンジニアのワクテカと申します。

JavaScriptでWEBページを印刷したい、と思ったことはありませんか?

今回は、JavaScriptに用意されているprintメソッドを使って、表示されているWEBページを印刷する方法を解説したいと思います!

この記事では、

・printメソッドの基本
・printメソッドのサンプルコードと使い方

などのprintメソッドの基本から、

・特定の要素を印刷させない方法
・特定のスタイルシートを適用させない方法

など、さらに応用的なprintメソッドの使い方まで解説していきます!

printメソッドとは

printメソッドとは、HTMLドキュメント(一般的なWEBページ)を印刷するためのメソッドです。

まずは、ブラウザのコンソールを開いて、以下のコードを実行してみましょう。

// 表示中の画面を印刷する
window.print();

実行すると、次のような印刷画面が表示されます。

印刷確認画面

このように、javascriptでは1行で印刷するためのコードを書くことができます。

また、他の言語を触ったことがある方は、printと聞くとコンソールへ出力するためのメソッドのように思う方もいるかも知れません。

javascriptでコンソールに文字を出力する場合は「console.log(“出力する文字”)」を使います。

詳しい書き方は以下記事に詳しくまとめているため、そちらを知りたい方はぜひ見てみて下さいね!

デバッグに大活躍! JavaScriptのconsole.logで値を表示しよう
更新日 : 2019年4月20日

それでは、より実践的な使い方をみていきましょう!

printメソッドの使い方

クリック処理で印刷を実行する

印刷処理は、ボタンやリンクをクリックして実行するケースが多いので、印刷ボタン、リンクの作り方について説明します!

クリック処理にwindows.print()を直接書くことで、簡単に印刷用のボタン、リンクを作ることができます。

ボタン:

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

リンク:

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

とてもシンプルなコードで作ることができるので、便利ですね。

印刷時のスタイルを変更する方法

印刷用のcssを指定することで、印刷時に印刷用のスタイルを適用したり、不要なボタンなどを隠すことができます。

特定の要素を印刷する/させないようにする

・印刷用のスタイルシートを読み込む

cssを読み込むlinkタグに、「media="print"」を指定することで、そのスタイルシートは印刷でのみ適用されます。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

・印刷用のスタイルを指定する

@mediaを使用して、CSS内で印刷用のスタイルを切り分けることも可能です。

@media print{
  .no-print-area {
    display: none;
  }
}

これで、「no-print-area」のクラスが指定された要素は印刷されないようになります。

printメソッドの注意点

これは、windowを印刷するための書き方になります。windowとは、HTMLドキュメントを収めるウィンドウを指しています。これだけで、表示中の画面(この記事)が印刷できます。

また、このメソッドはwindowオブジェクトに用意されたもので、特定の要素を印刷したりすることはできませんので、注意しましょう。

var heading = document.createElement("h1");
heading.print();

実行結果:

> Uncaught TypeError: heading.print is not a function

まとめ

いかがだったでしょうか。今回はWEBページの印刷できるprintメソッドについて解説しました。

printメソッドを活用するには、HTMLとCSSをうまく変更することが必要です。また、iframeを使用して特定のPDFを印刷できるようにする方法も学習しました。

印刷ができるようになると、「WEB文書ではなく実際の紙を使用したい」というユーザーやクライアントにとってはとても便利ですので、覚えておきましょう!

\業界最安級/
月額2,980円のプログラミングスクール

✔ 業界最安値の月定額2,980円
✔ 「Q&A掲示板」で平均30分以内に回答がもらえる
✔ 月に一度の「オンライン相談」で悩みを解決
✔ 教材の数は30種類以上
✔ 入会金不要+いつでも退会OK

公式サイトはこちら

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close