155

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?

3

6 Answers 6

221

@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

11
  • 23
    What will this do to the event listeners?
    – Juzer Ali
    Commented Apr 30, 2015 at 14:02
  • 23
    this may destroy your animations and events that was added by js after load. Use with caution. Commented Dec 14, 2015 at 16:45
  • 9
    This seems overly convoluted. @media print is a much cleaner solution (see 2ne's post below).
    – Jim Doyle
    Commented Jan 26, 2017 at 14:35
  • 4
    My dom event handlers are gone after reattaching the original content. Commented Mar 1, 2017 at 1:44
  • 3
    This will affect the original page after printing.
    – Nimer Awad
    Commented Mar 19, 2019 at 12:50
130

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>

2
  • 1
    I like that you don't need to open a new window and all that crap.
    – Robusto
    Commented Apr 16, 2017 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
    Commented Apr 23, 2017 at 13:17
87

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();
7
  • 11
    This solution requires JQuery which is not mentioned (or tagged) in the question. You should specify this dependency in your answer.
    – musefan
    Commented Oct 18, 2013 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
    Commented Aug 21, 2015 at 21:24
  • 2
    w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
    – karaxuna
    Commented Jan 13, 2016 at 14:45
  • 7
    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('<style>'+ ... + '</style>'); before the document.write() given here.
    – cst1992
    Commented Aug 19, 2017 at 8: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
    Commented Jan 25, 2020 at 23:15
11

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>
1
  • Not working in IE 11 Commented Feb 3, 2017 at 13:26
10

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>
1
  • 1
    Wow! This is the most straightforward answer I ever saw in Stackoverflow yet. Commented Jun 18, 2018 at 9:21
2

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');
1

Not the answer you're looking for? Browse other questions tagged or ask your own question.