jQuery Print Specific div Content demo

by Pritom K Mondal

HTML

<div>
  <h1>Header</h1>
  <div class="printable">
    <div>Body 1</div>
    <div class='c2'>Body 2</div>
    <div class='c2'><h1>Body 3 Inside Printable</h1></div>
  </div>

  <div style="margin-top:10px;border-top:1px solid;">&nbsp;</div>
  <button>Print</button>
</div>

CSS

body >div { margin:20px;border:2px solid;padding:7px; }
.printable .c2 { padding-left: 30px; }

@media print {
  @page { size: A4 landscape; padding:1cm; }
  body * { visibility: hidden; }
  .printable { 
    border:2px solid green;margin:0;left:0;top:0;position:absolute;
    width:calc(100% - 20px);padding:8px; 
  }
  .printable, .printable * { visibility: visible; }
}

JavaScript

document.title = "Need to print some specific area";
$("button").click(function() {
	var title = document.title;
  document.title = "Going to print";
	window.print();
  document.title = title;
});
setTimeout(function() {
	$("button").trigger("click");
}, 500);