Print specific part of webpage

Question

I'm trying to print a specific part of my application.

The application has a list of users, displaying their first and last name. When I click a user I get a popup with more detailed information about them.

How would I go about printing just the popup for a user I clicked? The popup looks like this:

 <div id="user<?=$user->id;?>" class="popup">       <div class="details">            User details...       </div>       <a href="#print">Print</a>  </div> 

The print button isn't working yet though.

Answer 1

You can use simple JavaScript to print a specific div from a page.

var prtContent = document.getElementById("your div id"); var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); WinPrint.document.write(prtContent.innerHTML); WinPrint.document.close(); WinPrint.focus(); WinPrint.print(); WinPrint.close(); 

Answer 2

You would have to open a new window(or navigate to a new page) containing just the information you wish the user to be able to print

Javscript:

function printInfo(ele) {     var openWindow = window.open("", "title", "attributes");     openWindow.document.write(ele.previousSibling.innerHTML);     openWindow.document.close();     openWindow.focus();     openWindow.print();     openWindow.close(); } 

HTML:

<div id="....">     <div>         content to print     </div><a href="#" onclick="printInfo(this)">Print</a> </div> 

A few notes here: the anchor must NOT have whitespace between it and the div containing the content to print