Best IT Recipes

Print a specific part of a web page

I am 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 on a user, I get a popup with more details about them.

How can I print only a popup for the 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 does not work yet.

+59
javascript html printing
Oct 21 '12 at 10:44
source share
11 answers

You can use simple JavaScript to print a specific div from the 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();
+129
Oct 21
source share

You will need to open a new window (or go to a new page) containing only the information that you want the user 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: An anchor should NOT have spaces between it and a div containing printable content

+9
Oct 21
source share

Instead of all complex JavaScript, you can achieve this with simple CSS : just use two CSS files, one for the regular screen, and the other for displaying ONLY the content you want to print. In this last file, hide everything that you do not want to print, only display a pop-up window.

Remember to specify the media attribute of both CSS files:

 <link rel="stylesheet" href="screen-css.css" media="all" /> <link rel="stylesheet" href="print-css.css" media="print" />
+9
Mar 30 '17 at 6:48
source share

I made this jQuery extension to print the HTML of the selected element: $('#div2').print();

 $.fn.extend({ print: function() { var frameName = 'printIframe'; var doc = window.frames[frameName]; if (!doc) { $('<iframe>').hide().attr('name', frameName).appendTo(document.body); doc = window.frames[frameName]; } doc.document.body.innerHTML = this.html(); doc.window.print(); return this; } });

See in action here .

+8
Oct. 13 '16 at 2:03
source share

Just use CSS to hide content that you don't want to print. When the user selects print, the page will look for CSS " media =" print " for instructions on page layout.

CSS = media = "print" contains instructions to hide content that we do not want to print.

 <!-- CSS for the things we want to print (print view) --> <style type="text/css" media="print"> #SCREEN_VIEW_CONTAINER{ display: none; } .other_print_layout{ background-color:#FFF; } </style> <!-- CSS for the things we DO NOT want to print (web view) --> <style type="text/css" media="screen"> #PRINT_VIEW{ display: none; } .other_web_layout{ background-color:#E0E0E0; } </style> 


 <div id="SCREEN_VIEW_CONTAINER"> the stuff I DO NOT want printed is here and will be hidden - and not printed when the user selects print. </div> <div id="PRINT_VIEW"> the stuff I DO want printed is here. </div>
+5
Jan 11 '18 at 21:09
source share

Here is my extended version when we want to download css files or there are links to images in the printable part. A.

In these cases, we need to wait until the css files or images are fully loaded before calling the print () function. Therefore, it is better to move the print () and close () calls to html. The following is sample code:

 var prtContent = document.getElementById("order-to-print"); var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0'); WinPrint.document.write('<html><head>'); WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">'); WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">'); WinPrint.document.write('</head><body onload="print();close();">'); WinPrint.document.write(prtContent.innerHTML); WinPrint.document.write('</body></html>'); WinPrint.document.close(); WinPrint.focus();
+3
Jul 04 '17 at 3:29
source share

I have a better option,

First separate the printable and non-printable sections by class name or identifier

 window.onafterprint = onAfterPrint; function print(){ //hide the nonPrintable div } function onAfterPrint(){ // Visible the nonPrintable div } 
 <input type="button" onclick="print()" value="Print"/>

All this

+1
Jun 09 '18 at 16:44
source share

As it is said here: https://stackoverflow.com/a/166268/2128 , you can add a specific section to a hidden frame with Javascript, focus it and print it.

0
Feb 04 '15 at 22:32
source share

In the printPageArea() function, pass the specific div identifier that you want to print. I found this javascript code from codexworld.com.

 function printPageArea(areaID){ var printContent = document.getElementById(areaID); var WinPrint = window.open('', '', 'width=900,height=650'); WinPrint.document.write(printContent.innerHTML); WinPrint.document.close(); WinPrint.focus(); WinPrint.print(); WinPrint.close(); }

The full code and tutorial can be found here - How to print a page area using JavaScript .

0
May 05 '16 at 7:51 am
source share

I wrote a tiny JavaScript module called PrintElements to dynamically print parts of a web page.

It works by iterating over the selected elements of the node and for each node iterates through the DOM tree to the BODY element. At each level, including the start (which is the node level for printing), it attaches the peer class ( pe-preserve-print ) to the current node. Then it attaches another marker class ( pe-no-print ) to all the siblings of the current node, but only if they do not have the pe-preserve-print class. As a third act, it also attaches another class to the stored elements of the ancestor pe-preserve-ancestor .

A simple simple additional print-only css will hide and show the relevant elements. Some of the advantages of this approach are that all styles are saved, it does not open a new window, there is no need to move many DOM elements, and, as a rule, it is non-invasive with your original document.

See the demo , or read the related article for more information .

0
Mar 11 '19 at 9:17
source share

 window.onafterprint = onAfterPrint; function print(){ //hide the nonPrintable div } function onAfterPrint(){ // Visible the nonPrintable div } 
 <input type="button" onclick="print()" value="Print"/>
0
Mar 28 '19 at 6:44
source share


More articles:


All Articles