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

Question

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 the some other HTML content which is not displayed on the page.

While asking this question, there are few solutions coming into my mind. But I am not sure whether those are good ideas or something better can be done. One of those solutions are: I can keep this HTML content in a div and make it display: to print, but display: none to screen. All other elements on the webpage can be made to display: none for print and display: for the screen. And then call to print.

Any better idea?

(Further considering that the highest rated answer here is using code from [one of the answers to the other question](http://stackoverflow.com/a/7532581/254830) almost verbatim) — doppelgreener, May 08 '14 at 04:39
this library can help with printing selected html elements in a page: http://printjs.crabbly.com/ — crabbly, Sep 03 '16 at 18:14

score 212 · Answer 1 · edited Jan 06 '21 at 08:37

212

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

I came across another elegant solution for this:

Place your printable part inside a div with an id like this:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Now let's create a really simple javascript:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

SOURCE : SO Answer

edited Jan 06 '21 at 08:37

Mouad Khomssan

1
3

answered Jun 03 '13 at 11:05

asprin

9,579
12
66
119

23

What will this do to the event listeners? – Juzer Ali Apr 30 '15 at 14:02
How to open that in new window? – Shailendra Madda Aug 03 '15 at 16:52
using same solution but this only prints innerHTML not the styles of page even border of table disappears......................... function Printable(div_id) { var DocumentContainer = document.getElementById(div_id); WindowObject.document.writeln(DocumentContainer.innerHTML;); WindowObject.document.close(); WindowObject.focus(); WindowObject.print(); } This is the code for opening it in new window. – N.A Sep 26 '15 at 06:34
20

this may destroy your animations and events that was added by js after load. Use with caution. – Lukas Liesis Dec 14 '15 at 16:45
To get the styles involved, you just need to use the `` for the style-sheet inside the div – BlackPanther Mar 18 '16 at 17:11
7

This seems overly convoluted. @media print is a much cleaner solution (see 2ne's post below). – Jim Doyle Jan 26 '17 at 14:35
4

My dom event handlers are gone after reattaching the original content. – johntrepreneur Mar 01 '17 at 01:44
Not working for me :( – Moeez Oct 26 '17 at 11:19
3

This will affect the original page after printing. – Nimer Awad Mar 19 '19 at 12:50
Worked for me. Asp.net webform 4.6.2 call function from a button. – ToanTV May 06 '20 at 03:08
@nimeresam I am using this solution and after printing the popup i am not able to close the popup. Do you have any alternative solution for this? – vishal.kangralkar Oct 22 '20 at 09:07

score 126 · Answer 2 · edited Sep 18 '17 at 09:49

126

Here is a pure css version

.example-print {
    display: none;
}
@media print {
   .example-screen {
       display: none;
    }
    .example-print {
       display: block;
    }
}

<div class="example-screen">You only see me in the browser</div>

<div class="example-print">You only see me in the print</div>

edited Sep 18 '17 at 09:49

Jonathan

2,700
4
23
41

answered Jun 03 '13 at 10:36

2ne

5,766
9
30
51

1

I like that you don't need to open a new window and all that crap. – Robusto Apr 16 '17 at 22:01
1

@Robusto agree in one hand, but I don't like how it's not so good for saving the page (without needing to print), not to mention when there's paging to be handled. preparing a page to "print" is ambiguous in that sense. – cregox Apr 23 '17 at 13:17

score 86 · Answer 3 · edited May 23 '17 at 12:10

86

According to this SO link you can print a specific div with

w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerH‌TML);
w.print();
w.close();

edited May 23 '17 at 12:10

Community

1
1

answered Jun 03 '13 at 10:35

Jaay

2,103
1
16
34

9

This solution requires JQuery which is not mentioned (or tagged) in the question. You should specify this dependency in your answer. – musefan Oct 18 '13 at 11:08
9

replacing `$('.report_left_inner').html()` by vanilla js would make this the best answer on the page for simplicity and robustness – zeachco Aug 21 '15 at 21:24
2

`w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);` – karaxuna Jan 13 '16 at 14:45
6

This is excellent. One point of caution though: you'll need to check and inject your style rules separately, or it'll fall back to bare HTML. For that I personally did `document.write('');` before the `document.write()` given here. – cst1992 Aug 19 '17 at 08:14
This is interesting but when I tried it from an Angular component I didn't get the CSS applied to the new window. Also, the images don't have time to load between the write call and the print call so they don't appear until after the print dialog is done. – AlanObject Jan 25 '20 at 23:15
This is not working in current versions of chrome, also, popups may be blocked by the users browser. – Felix Hagspiel Jun 05 '20 at 12:43
This creates a visible tab in the browser under the print dialog, which is pretty ugly. – Jaromír Adamec Feb 16 '23 at 17:49

score 11 · Answer 4 · answered Jul 25 '14 at 12:27

I Want See This

Example http://jsfiddle.net/35vAN/

    <html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

</script>
</head>
<body>

<div id="mydiv">
    This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
</div>

<div>
    This will not be printed.
</div>

<div id="anotherdiv">
    Nor will this.
</div>

<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

</body>

</html>

score 10 · Answer 5 · answered Jun 03 '13 at 10:36

Below Code May Be Help You :

<html>
<head>
<script>
function printPage(id)
{
   var html="<html>";
   html+= document.getElementById(id).innerHTML;

   html+="</html>";

   var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status  =0');
   printWin.document.write(html);
   printWin.document.close();
   printWin.focus();
   printWin.print();
   printWin.close();
}
</script>
</head>
<body>
<div id="block1">
<table border="1" >
</tr>
<th colspan="3">Block 1</th>
</tr>
<tr>
<th>1</th><th>XYZ</th><th>athock</th>
</tr>
</table>

</div>

<div id="block2">
    This is Block 2 content
</div>

<input type="button" value="Print Block 1" onclick="printPage('block1');"></input>
<input type="button" value="Print Block 2" onclick="printPage('block2');"></input>
</body>
</html>

Wow! This is the most straightforward answer I ever saw in Stackoverflow yet. — Vince Banzon, Jun 18 '18 at 09:21

score 2 · Answer 6 · answered Jul 04 '14 at 00:26

If you add and remove the innerHTML, all javascript, css and more will be loaded twice, and the events will fire twice (happened to me), is better hide content, using jQuery and css like this:

function printDiv(selector) {
    $('body .site-container').css({display:'none'});
    var content = $(selector).clone();
    $('body .site-container').before(content);
    window.print();
    $(selector).first().remove();
    $('body .site-container').css({display:''});
}

The div "site-container" contain all site, so you can call the function like:

printDiv('.someDiv');

Hi Alejo. Clever solution, but it doesn't work in IE. Could you please help me with this question: https://stackoverflow.com/questions/49410902 THaNKS! — codeispoetry, Mar 21 '18 at 15:56

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

6 Answers6

Linked