Print the contents of specific DIV using javascript | jQuery Print Specific div Content demo | How to print selected div instead complete page JQuery | Print specific element using jquery | jQuery Plugin To Print Any Part Of Your Page - Print | Printing selective DOM elements on a page

HTML Element

<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>

Styling

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 / JQuery part

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; });

And finally LIVE DEMO on JSFiddle