[ JavaScript 基礎 ] window.print : 印刷ダイアログを表示&印刷範囲の変更

以下のような印刷用の画面を見たことはありませんか??

そう、ブラウザ上で表示しているページを印刷したいときによく見る印刷画面ですね！

※ ブラウザ上で Winodwsなら「Ctrl + p」, Macなら「command + p」を押すことで表示させることが出来ます。

今回は、この印刷画面(印刷ダイアログ)をJavaScriptでボタンを押した際に呼び出せるようにしたいと思います。印刷する範囲を指定する方法(印刷用CSSを記述する方法)と詳細設定の初期値を変更する方法もあわせてご紹介していきます。

HTMLファイルを作成
最低限のCSSを記述
JavaScriptファイルを作成
1. 印刷ダイアログを開く
印刷する範囲を指定する
1. 印刷用のCSSを記述
詳細設定の初期の値を変更する
最後に

HTMLファイルを作成

これから作成する各種ファイルについては、全て同じ階層にあることを前提としています。(イメージとしては、デスクトップ上に全て作成するような感じ。)

以下のコードを用いていきます。print_sample.htmlという名前で作成しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./print_sample.css">
    <title>window.print</title>
  </head>
  <body>
    <h1>window.print_テスト</h1>
    <div class="print_main">
      <div class="yes-p"></div>
      <div class="yes-p no-p"></div>
    </div>
    <div class="print_button">
      <button>印刷ダイアログ表示</button>
    </div>
    <script src="./print_sample.js"></script>
  </body>
</html>

最低限のCSSを記述

print_sample.css という名前のCSSファイルを記述し、以下の内容を記述しましょう。ここでの各種CSSプロパティの説明については省きますが、質問はコメントにて受け付けておりますので、気軽にどうぞ！

.print_main {
  width:100%;
  height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  background-color:blue;
}

.yes-p {
  width:45%;
  height:150px;
  background-color:red;
}

.print_button {
  width:100%;
  margin-top:15px;
  display:flex;
  justify-content:center;
}

ブラウザで確認し、次のように表示されていればOKです。

JavaScriptファイルを作成

print_sample.jsという名前でJavaScriptファイルを作成しましょう。

印刷ダイアログを開く

windowオブジェクトのprintメソッドを呼び出すことで、印刷ダイアログを表示させることが可能です。

公式サイトはこちらからご確認ください。

Window.print() - Web API | MDN

現在の文書を印刷するための印刷ダイアログを開きます。

// button要素を取得
const bu = document.querySelector(".print_button");
// ボタンを押下した時にクリックイベントを発火させる
bu.addEventListener("click", () => {
  // 印刷ダイアログを表示させる
  window.print();
});

ファイル内に記述出来たら、実際に試してみましょう。

以下のようにボタンを押した際に印刷ダイアログが表示されればOKです。

青と赤のブロックの部分は、ダイアログ上の詳細設定 -> オプション -> 背景のグラフィックにチェックしないと表示されませんので注意してください。

印刷する範囲を指定する

印刷する範囲を特定したい場合があります。例えば、何かしらの一覧画面で、タイトルとか他の部分は省いてテーブル部分のみを表示したい場合などが例としてあげれます。

範囲の指定は、CSSで行うことが可能です。「@media print {}」を使用します。

印刷用のCSSを記述

今回は、表示しているブロックの片方に「no-p」という名前のclassを割り当てていますので、こちらを用いて、コードを書いていきます。

@media print { 　　
  // 以下のclassを設定しているHTML要素が印刷プレビューに表示されないようになる
  .no-p {
    display: none;
  }
}

print_sample.css内に記述できましたら、印刷ダイアログ上のプレビューに変化があるかボタンを押して、確認してみましょう。

すると、先程と違い、赤いブロックが片方しか表示されていません。

実際の画面は何も変わりませんが、印刷ダイアログ上の印刷プレビューが変わっていれば正常に反映されています。

このように、通常のCSSとは別に印刷用のCSSを別途、記述してあげることで印刷範囲を自由にカスタマイズすることが出来ます。

詳細設定の初期の値を変更する

詳細設定の初期の値を変更するためには、「@page {}」をCSSファイル上に記述していく必要があります。一部、参考までご紹介しますので、活用してもらえればと思います。

余白の設定

余白は、marginで設定することが可能です。

以下は、余白をなしにした場合の書き方の例になります。

@media print {
  @page {
    margin : 0;
  }
}

印刷サイズの設定

印刷サイズは、デフォルトはA4で指定されていますが、こちらも変更可能です。

sizeというプロパティを使用します。

@media print {
  @page {
    size: 210mm 297mm;
  }
}

以下のように用紙サイズと向きを合わせて設定することも可能です。(landscape -> 横向き)

@media print {
  @page {
    size: A4 landscape;
  }
}

倍率・縮尺の設定

こちらは書き方が少し書き方が異なってきます。zoomというプロパティを使用しますが、body要素に対して設定する必要があります。

プレビュー画面から印刷したい場所がはみ出してしまっている時、収まるよう設定したりします。

例えば縮尺を80に設定したい場合、次のように書きます。

@media print {
  body {
    zoom:0.8;
  }
}

最後に

ここまで読んで頂き、有り難う御座います。

プログラミングを学習している方やこれから始めようと考えている方にお知らせです。

⇩⇩⇩⇩⇩⇩

独学で学習を続けても中々、理解が定着しない..
エラーが出てしまい、想定した結果が得られない…
フリーランスとしてデビューしたいが何からやったらいいかわからない…

などの悩みがある方必見！

実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。

話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。
オンラインで利用できるため、隙間時間で学習ができる。
質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
入会金不要で、あわないなと思ったらいつでも退会が可能。
実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる