Code Samples: print-specific-element

Friday, January 12, 2018

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

Pages

Friday, January 12, 2018

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