Print Specific Div Using Javascript and Jquery

In this post, I shared jquery code to print a specific div. Often we need to print invoices or tables. So instead of printing the entire page, we have to print the specific div. We can easily do this task through jquery.

Print Div Using Javascript

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Print Specific Div Using Javascript</title>
</head>
<body style="background-color: lightcyan;">

	<button type="button" onClick="printdiv('div_print');">Print</button>

  <div id="div_print">
      <h1>Print this paragraph</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur hic error adipisci veniam magni deleniti iusto sit ipsum eveniet? Sequi ipsam voluptatum aspernatur est magni aperiam impedit odit? Aliquam, accusamus. </p>
  </div>
  <div>
      <h1>Do't print this div</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur hic error adipisci veniam magni deleniti iusto sit ipsum eveniet? Sequi ipsam voluptatum aspernatur est magni aperiam impedit odit? Aliquam, accusamus. </p>
  </div>
 


</body>
</html>

Javascript

function printdiv(printpage) {
    var headstr = "<html><head><title></title></head><body>";
    var footstr = "</body>";
    var newstr = document.all.item(printpage).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr + newstr + footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

Print Div Using JQuery

Html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Print Specific Div Using jquery</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>


<body style="background-color: lightcyan;">

<div id='DivIdToPrint'>
  <h1>Print this paragraph</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur hic error adipisci veniam magni deleniti iusto sit ipsum eveniet? Sequi ipsam voluptatum aspernatur est magni aperiam impedit odit? Aliquam, accusamus. </p>
</div>

<div>
  <h1>Do't print this div</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur hic error adipisci veniam magni deleniti iusto sit ipsum eveniet? Sequi ipsam voluptatum aspernatur est magni aperiam impedit odit? Aliquam, accusamus. </p>
</div>

<input type='button' id='btn' value='Print' onclick='printDiv();'>


</body>
</html>

Jquery

<script>
   function printDiv() 
    {
      var divToPrint=document.getElementById('DivIdToPrint');
      var newWin=window.open('','Print-Window');
      newWin.document.open();
      newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
      newWin.document.close();
      setTimeout(function(){newWin.close();},10);
    }
 </script>

I hope It will help you.