【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文書ではなく実際の紙を使用したい」というユーザーやクライアントにとってはとても便利ですので、覚えておきましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ワカツキ ヒロアキ

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

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー