HTML でページを印刷する

この記事では、HTML のページから特定のコンテンツを印刷するためのいくつかの方法を紹介します。

@media print 内の display:none でコンテンツを非表示にすると、特定のコンテンツを HTML で印刷できます

CSS を使用して、紙に印刷したときの Web ページの外観を変更できます。Web コンテンツを印刷するときに 1つの CSS スタイルを Web に設定し、別の CSS スタイルを設定できます。

CSS の@media print ルールを使用すると、HTML コンテンツの印刷中に HTML コンテンツのスタイルを変更できます。

HTML コンテンツを印刷するには JavaScript が必要です。window.print() メソッドを使用すると、現在のウィンドウを印刷できます。

print() メソッドはPrintダイアログボックスを開きます。このダイアログボックスでは、好みの印刷オプションを選択できます。ボタンをクリックして現在のウィンドウを印刷した後、window.print() を呼び出すことができます。

@media print を使用して、印刷したくない HTML コンテンツの display プロパティを none に設定できます。これは、Web 上にコンテンツがあるにもかかわらず、印刷オプション内の HTML コンテンツを表示しません。

たとえば、HTML で、h1 タグを使用して 2つの見出しを作成します。最初の見出しにNeed to print thisという名前を付け、2 番目の見出しにDon't need to print thisという名前を付けます。

2 番目の見出しのクラス名を dontPrint として指定します。次に、ボタンを作成し、印刷という名前を付けます。

また、このボタンに dontPrint のクラス名を付けます。ボタンの onClick リスナーを作成し、ボタンがクリックされたときに window.print() メソッドを呼び出します。

CSS セクションの@media print 内で、dontPrint という名前のクラスの display プロパティを none に設定します。

次の例は、Printボタンをクリックしたときに、クラス名 dontPrint の見出しとボタンが印刷セクションに表示されないことを示しています。

サンプルコード：

<h1>
  Need to print this
</h1>
<h1 class="dontPrint">
  Don't need to print this
</h1>
<button onclick="window.print();" class="dontPrint">
  Print
</button>

@media print {
 .dontPrint{
 display:none;
 }
}

特定のコンテンツを HTML で id を onClick イベントリスナーに渡して印刷する

この方法では、印刷する特定のコンテンツの id を作成できます。次に、onClick イベントリスナーを使用して、id を JavaScript 関数に渡すことができます。

JavaScript は、指定されたコンテンツを window.print() メソッドで印刷します。

innerHTML プロパティは、要素の HTML コンテンツを設定または返します。これを使用して、document.getElementById() メソッドとともに JavaScript で印刷されたコンテンツを選択できます。

同様に、document.body プロパティとともに innerHTML プロパティを使用して、HTML ドキュメントの元のコンテンツを保持できます。コンテンツを印刷した後、document.body.innerHTML プロパティで HTML ドキュメントの元のコンテンツを設定できます。

より明確に理解するために、以下の手順を見てみましょう。

たとえば、div を作成し、それに printIt の id を指定します。その div の中に h1 タグを作成し、その中に Need to print this と書きます。

div の外側にbuttonを作成し、Printという名前を付けます。ボタンの onclick リスナーを作成し、パラメーターとして printItid を使用して printOut 関数を呼び出します。

JavaScript セクションで、引数 divId を使用して printOut という名前の関数を作成します。divId の innerHTML を格納する printOutContent という名前の変数を作成します。

次に、別の変数 originalContent を作成して、HTML 本文の innerHTMl を格納します。デモを以下に示します。

var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;

次に、本文の innerHTML を printOutContent 変数に設定します。

次に、window.print() メソッドを呼び出します。メソッドを呼び出した後、本文の innerHTML を originalContent 変数に設定します。

document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;

ここで、window.print() メソッドを呼び出すと、document.body.innerHTML には印刷される要素のみが含まれるため、divIdid のセクションのみが印刷されます。コンテンツが印刷されると、HTML ドキュメント全体のコンテンツが元の状態に設定されます。

したがって、JavaScript を使用して HTML ドキュメントの特定のコンテンツを印刷しました。

サンプルコード：

<div id="printIt">
  <h1>
    Need to Print this
  </h1>
</div>
<button onClick="printOut('printIt')">
  Print
</button>

function printOut(divId) {
  var printOutContent = document.getElementById(divId).innerHTML;
  var originalContent = document.body.innerHTML;
  document.body.innerHTML = printOutContent;
  window.print();
  document.body.innerHTML = originalContent;
}