【実践ガイド】DIV印刷をマスターしよう！JavaScript、jQuery、HTML、CSS、ライブラリで実現する印刷機能

2024-04-14

JavaScript、jQuery、HTML を使って DIV の内容を印刷する方法

このチュートリアルでは、JavaScript、jQuery、HTML を使って DIV の内容を印刷する方法を説明します。3 つの方法を紹介します。

JavaScript の print() 関数
jQuery の print() メソッド
HTML の print 属性

各方法について、その仕組みと使用方法、そして利点と欠点について説明します。

最も基本的な方法は、JavaScript の print() 関数を使うことです。この関数は、引数として渡された文字列をブラウザの印刷ウィンドウに表示します。

<div id="myDiv">
  <h1>印刷したい見出し</h1>
  <p>印刷したい内容</p>
</div>

<script>
  function printDiv() {
    var divContent = document.getElementById('myDiv').innerHTML;
    window.print(divContent);
  }
</script>

<button onclick="printDiv()">印刷</button>

この例では、printDiv() 関数は myDiv IDを持つ DIV の HTML 内容を取得し、それを window.print() 関数に渡して印刷します。

利点:

シンプルで分かりやすい

スタイルシートやスクリプトは印刷されない
ヘッダーやフッターなどの印刷設定を制御できない

jQuery を使えば、print() 関数よりも柔軟に DIV の内容を印刷することができます。jQuery の print() メソッドは、印刷する前に DIV の内容を加工したり、スタイルシートやスクリプトを含めたりすることができます。

<div id="myDiv">
  <h1>印刷したい見出し</h1>
  <p>印刷したい内容</p>
</div>

<script>
  $(document).ready(function() {
    $('#printButton').click(function() {
      $('#myDiv').print({
        title: '印刷タイトル',
        stylesheet: 'print.css'
      });
    });
  });
</script>

<button id="printButton">印刷</button>

この例では、print() メソッドを使って myDiv IDを持つ DIV を印刷します。title オプションで印刷ページのタイトルを設定し、stylesheet オプションで印刷時に適用する CSS ファイルを指定しています。

スタイルシートやスクリプトを含めることができる
jQuery の豊富な機能を使って印刷処理をカスタマイズできる

HTML5 では、print 属性を使って DIV を印刷することができます。この属性は、印刷時に表示するコンテンツを指定するために使用されます。

<div id="myDiv" print>
  <h1>印刷したい見出し</h1>
  <p>印刷したい内容</p>
</div>

この例では、myDiv IDを持つ DIV に print 属性を追加することで、その内容が印刷時に表示されるようになります。

最もシンプルで簡単な方法

JavaScript、jQuery、HTML を使って DIV の内容を印刷する方法には、それぞれ利点と欠点があります。状況に合わせて最適な方法を選択してください。

補足

印刷機能はブラウザによって挙動が異なる場合があります。
ユーザーのプリンター設定によっては、印刷結果が期待通りにならない場合があります。

JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript で DIV を印刷</title>
</head>
<body>
  <div id="myDiv">
    <h1>印刷したい見出し</h1>
    <p>印刷したい内容</p>
  </div>

  <script>
    function printDiv() {
      var divContent = document.getElementById('myDiv').innerHTML;
      window.print(divContent);
    }
  </script>

  <button onclick="printDiv()">印刷</button>
</body>
</html>

このコードは、以下の動作をします。

myDiv IDを持つ DIV を作成します。
printDiv() 関数を作成します。
"印刷" ボタンを作成します。
"印刷" ボタンをクリックすると、printDiv() 関数が呼び出されます。

jQuery

<!DOCTYPE html>
<html>
<head>
  <title>jQuery で DIV を印刷</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="myDiv">
    <h1>印刷したい見出し</h1>
    <p>印刷したい内容</p>
  </div>

  <script>
    $(document).ready(function() {
      $('#printButton').click(function() {
        $('#myDiv').print({
          title: '印刷タイトル',
          stylesheet: 'print.css'
        });
      });
    });
  </script>

  <button id="printButton">印刷</button>
</body>
</html>

jQuery ライブラリを読み込みます。
printButton IDを持つボタンを作成します。
printButton ボタンがクリックされたときに、print() メソッドを使って myDiv DIV を印刷します。
title オプションで印刷ページのタイトルを設定します。
stylesheet オプションで印刷時に適用する CSS ファイルを指定します。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>HTML で DIV を印刷</title>
</head>
<body>
  <div id="myDiv" print>
    <h1>印刷したい見出し</h1>
    <p>印刷したい内容</p>
  </div>
</body>
</html>

print 属性を myDiv DIV に追加します。
print 属性が指定された DIV は、印刷時に表示されます。

説明

上記はあくまでも基本的な例です。実際の開発では、状況に合わせてコードをカスタマイズする必要があります。

印刷するコンテンツの量が多い場合は、ページング機能を実装する必要があります。
ユーザーが印刷範囲を選択できるようにするには、オプションを追加する必要があります。
印刷プレビュー機能を実装することもできます。

これらの機能を実装するには、JavaScript、jQuery、HTML のさらなる知識が必要です。

その他の DIV 印刷方法

CSS print-media-type を使用して、印刷時にのみ適用される専用のスタイルシートを定義できます。これにより、印刷時のレイアウトと外観をより細かく制御できます。

/* 通常のスタイル */
body {
  font-family: Arial, sans-serif;
}

/* 印刷時のスタイル */
@media print {
  body {
    font-family: Times New Roman, serif;
    margin: 2cm;
  }
  
  #myDiv {
    border: 1px solid black;
  }
}

この例では、印刷時にフォントを Times New Roman に変更し、余白を 2cm に設定し、myDiv 要素に境界線を追加します。

第三者ライブラリ

jsPDF や html2canvas などのライブラリを使用して、ブラウザ内で PDF または画像ファイルを生成し、印刷することができます。これらのライブラリは、より高度な印刷機能を提供する場合があり、複雑なレイアウトや動的なコンテンツの印刷にも役立ちます。

ブラウザの印刷機能

多くのブラウザには、ページ全体または選択した部分を印刷するための組み込み機能が用意されています。これらの機能は、基本的な印刷タスクには十分ですが、高度な制御はできません。

最適な方法を選択

使用する方法は、要件と状況によって異なります。

シンプルな印刷: 基本的な印刷であれば、JavaScript の print() 関数、jQuery の print() メソッド、または HTML の print 属性で十分です。
印刷レイアウトの制御: 印刷レイアウトをより細かく制御したい場合は、CSS print-media-type を使用します。
高度な印刷機能: 複雑なレイアウトや動的なコンテンツを印刷するには、jsPDF や html2canvas などのライブラリを使用します。
簡単な印刷: ブラウザの印刷機能で十分な場合は、そちらを使用します。