Printing a Div

This example prints the contents inside the pink div.

PrintADiv.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="PrintADiv.js"></script>
  </head>
  <body>
    <div id="idPrintArea" style="width:600px;background-color:pink;padding:10px;
    border:solid 1px black">
      <h1>The Declaration of Independence</h1>
      <p>When in the Course of human events, it becomes necessary for one people
      to dissolve the political bands which have connected them with another, and
      to assume among the powers of the earth, the separate and equal station to
      which the Laws of Nature and of Nature's God entitle them, a decent respect
      to the opinions of mankind requires that they should declare the causes which
      impel them to the separation.</p>
    </div>
    <div>
      <h1>This will not be printed</h1>
	</div>
    <input type="button" onclick="PrintDiv('idPrintArea')" value="Print Inside the Pink div!" />
  </body>
</html>

PrintADiv.js

function PrintDiv(sDivID) {
  // Store all of the contents of the body, before writing over it.
  var sOriginalContents = document.body.innerHTML;
  // Load the body only with the contents of the div that we want printed.
  var sPrintContents = document.getElementById(sDivID).innerHTML;
  document.body.innerHTML = sPrintContents;
  // Call the print function
  window.print();
  // Restore the original contents
  document.body.innerHTML = sOriginalContents;
}

Core JavaScript

Printing a Div

PrintADiv.html

PrintADiv.js

Output