JavaScriptでprintを使いこなす5つの方法

はじめに
●JavaScriptでprintを使う基本
- ○print関数の基本構文
●サンプルコードと使い方
●応用例とサンプルコード
- ○サンプルコード6：複数の要素を一度に印刷する
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでprintを使いこなすことができるようになります。

JavaScriptのprint関数はWebページの印刷を行う際に使用される関数ですが、初心者にとっては難しく感じるかもしれません。

この記事では、JavaScriptでprintを使った基本的な使い方から応用例、注意点、カスタマイズ方法まで、初心者目線で詳しく解説していきます。

●JavaScriptでprintを使う基本

○print関数の基本構文

JavaScriptでprint関数を使用するには、次のような基本構文を使用します。

window.print();

このコードを実行すると、現在表示されているWebページが印刷されます。

●サンプルコードと使い方

ここでは、JavaScriptでprintを使った5つのサンプルコードとその使い方を紹介します。

○サンプルコード1：Webページを印刷する

このコードでは、ボタンをクリックすると、Webページ全体を印刷する機能を実現しています。

この例では、onclickイベントを使って、ボタンがクリックされた際にprintPage関数を実行し、その中でwindow.print()を呼び出しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード1</title>
  <script>
    function printPage() {
      window.print(); // ページ全体を印刷
    }
  </script>
</head>
<body>
  <h1>印刷サンプル</h1>
  <p>このページを印刷します。</p>
  <button onclick="printPage()">印刷する</button>
</body>
</html>

○サンプルコード2：指定した要素を印刷する

このコードでは、指定した要素のみを印刷する方法を紹介しています。

この例では、printElement関数で引数として渡された要素を印刷しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード2</title>
  <script>
    function printElement(elementId) {
      const printContents = document.getElementById(elementId).innerHTML;
      const originalContents = document.body.innerHTML;
      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
    }
  </script>
</head>
<body>
  <h1>要素印刷サンプル</h1>
  <div id="printableArea">
    <p>この要素のみを印刷します。</p>
  </div>
  <button onclick="printElement('printableArea')">印刷する</button>
</body>
</html>

○サンプルコード3：印刷プレビューを開く

このコードでは、印刷プレビュー画面を開く方法を紹介しています。

この例では、印刷プレビュー画面が開かれた後、印刷を実行するかキャンセルするかをユーザーに選択させています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード3</title>
  <script>
    function openPrintPreview() {
      window.print(); // 印刷プレビュー画面を開く
    }
  </script>
</head>
<body>
  <h1>印刷プレビューサンプル</h1>
  <p>印刷プレビュー画面を開きます。</p>
  <button onclick="openPrintPreview()">印刷プレビューを開く</button>
</body>
</html>

○サンプルコード4：印刷時にカスタムスタイルを適用する

このコードでは、印刷時にカスタムスタイルを適用する方法を紹介しています。

この例では、@media printを使って、印刷時のみ適用されるCSSスタイルを定義しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード4</title>
  <style>
    @media print {
      body {
        font-size: 14pt;
      }
      h1 {
        color: red;
      }
    }
  </style>
  <script>
    function printPageWithCustomStyle() {
      window.print();
    }
  </script>
</head>
<body>
  <h1>カスタムスタイル印刷サンプル</h1>
  <p>印刷時にカスタムスタイルを適用します。</p>
  <button onclick="printPageWithCustomStyle()">印刷する</button>
</body>
</html>

○サンプルコード5：印刷をキャンセルする

このコードでは、印刷をキャンセルする方法を紹介しています。

この例では、印刷プレビュー画面を表示し、そこで印刷をキャンセルする操作をユーザーに促しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード5</title>
  <script>
    function cancelPrint() {
      window.print(); // 印刷プレビュー画面を開く
      // 印刷プレビュー画面で印刷をキャンセルする
    }
  </script>
</head>
<body>
  <h1>印刷キャンセルサンプル</h1>
  <p>印刷プレビュー画面で印刷をキャンセルします。</p>
  <button onclick="cancelPrint()">印刷キャンセル</button>
</body>
</html>

●応用例とサンプルコード

○サンプルコード6：複数の要素を一度に印刷する

このコードでは、複数の要素を一度に印刷する方法を紹介しています。

この例では、printMultipleElements関数で、複数の要素を取得し、それらを結合して印刷しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード6</title>
  <script>
    function printMultipleElements(elementIds) {
      let printContents = '';
      elementIds.forEach((elementId) => {
        printContents += document.getElementById(elementId).innerHTML;
      });
      const originalContents = document.body.innerHTML;
      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
    }
  </script>
</head>
<body>
  <h1>複数要素印刷サンプル</h1>
  <div id="element1">
    <p>要素1：ここは印刷されます。</p>
  </div>
  <div id="element2">
    <p>要素2：ここも印刷されます。</p>
  </div>
  <button onclick="printMultipleElements(['element1', 'element2'])">複数要素を印刷</button>
</body>
</html>