JavaScriptで特定の範囲だけ印刷する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで特定の範囲だけ印刷する方法について解説しています。特定の範囲を印刷する場合はvisibilityのhiddenで一度非表示にし、印刷後にvisibleで表示させます。サンプルで書き方を学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで特定の範囲だけ印刷する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

特定の範囲だけ印刷する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

ページ全体を印刷する方法

WEBページ全体を印刷するのはとても簡単です。window.print();を実行するだけです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

特定の範囲だけ印刷する方法

特定の範囲を指定するには、逆に特定以外の部分を非表示にすることで実現します。印刷前にvisibilityを”hidden”で非表示にして、印刷後に”visible”で表示させます。

 

実際に書いてみよう

<html>

  <head>

    <metacharset="UTF-8">

    <title>JavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法を現役エンジニアが解説【初心者向け】</title>

  </head>

  <body>

    <headerid="header">JavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法を現役エンジニアが解説【初心者向け】</header>

    <div>

      <p>この部分は印刷したいと思います

      <buttononclick="funcprint()">印刷</button>

    </div>

    <footerid="footer">こちらは印刷範囲外です</footer>

    <script>

      functionfuncprint(){

        letheader = document.getElementById('header'), footer = document.getElementById('footer');

        header.style.visibility = "hidden";

        footer.style.visibility = "hidden";

        window.print();




        header.style.visibility = "visible";

        footer.style.visibility = "visible";

      };

    </script>

  </body>




</html>

 

まとめ

裏技的に感じるかもしれませんが、指定の印刷範囲はこの様に実現します。複雑なパターンでは少し複雑になるかと思います。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。