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

JavaScript

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

window.print_demo

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

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

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

  1. HTMLファイルを作成
  2. 最低限のCSSを記述
  3. JavaScriptファイルを作成
    1. 印刷ダイアログを開く
  4. 印刷する範囲を指定する
    1. 印刷用のCSSを記述
  5. 詳細設定の初期の値を変更する
    1. 余白の設定
    2. 印刷サイズの設定
    3. 倍率・縮尺の設定
  6. まとめ

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です。

window.print_base

 

JavaScriptファイルを作成

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

印刷ダイアログを開く

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

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

Window.print() - Web API | MDN
現在の文書を印刷するための印刷ダイアログを開きます。
developer.mozilla.org
 
// button要素を取得
const bu = document.querySelector(".print_button");
// ボタンを押下した時にクリックイベントを発火させる
bu.addEventListener("click", () => {
  // 印刷ダイアログを表示させる
  window.print();
});

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

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

window.print_try

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

印刷する範囲を指定する

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

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

印刷用のCSSを記述

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

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

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

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

window.print_no-print

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

このように、通常の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;
  }
}

まとめ

  • JavaScriptで印刷ダイアログを表示するためには、windowオブジェクトのprintメソッドを使用する。
  • @media print{} 内に記述したCSSで印刷する範囲や印刷時のレイアウトデザインを変更することが出来る
  • @page {} でページ設定を変更することが出来る

コメント

タイトルとURLをコピーしました