Print specific part of webpage

javascript html printing
Gregor Menih picture Gregor Menih · Oct 21, 2012 · Viewed 128.7k times · Source

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

pmtamal picture pmtamal · Oct 21, 2012

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

Related questions

Print the contents of a DIV

Whats the best way to print the contents of a DIV?

Read More
How to print HTML content on click of a button, but not the page?

I want to print some HTML content, when the user clicks on a button. Once the user clicks on that button, the print dialog of the browser will open, but it will not print the webpage. Instead, it will print …

Read More
Disabling browser print options (headers, footers, margins) from page?

I have seen this question asked in a couple of different ways on SO and several other websites, but most of them are either too specific or out-of-date. I'm hoping someone can provide a definitive answer here without pandering to …

Read More