Академический Документы
Профессиональный Документы
Культура Документы
1. Questions
2. Developer Jobs
3. Tags
4. Users
1.
2.
3.
4.
Log In Sign Up
Join Stack Overflow to learn, share knowledge, and build your career.
Email Sign Up OR SIGN IN WITH
Google
Facebook
How to print HTML content on click of a button, but not the
page? [duplicate]
Ask Question
31
This question already has an answer here:
Print <div id=“printarea”></div> only? 25 answers
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?
Debiprasad
1,64983761
up vote100down vote
I came across another elegant solution for this:
<div id="printableArea">
<h1>Print me</h1>
</div>
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
shareimprove this answer
edited May 23 '17 at 12:10
Community♦
11
answered Jun 3 '13 at 11:05
asprin
6,15084390
15
What will this do to the event listeners? – Juzer Ali Apr 30 '15 at 14:02
How to open that in new window? – Shylendra Madda Aug 3 '15 at 16:52
4
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
2
This seems overly convoluted. @media print is a much cleaner solution (see 2ne's post below). – Jim DoyleJan 26
'17 at 14:35
1
My dom event handlers are gone after reattaching the original content. – johntrepreneur Mar 1 '17 at 1:44
show 3 more comments
up vote57down vote
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>
Jonathan
651723
answered Jun 3 '13 at 10:36
2ne
2,85951945
1
I like that you don't need to open a new window and all that crap. – Robusto Apr 16 '17 at 22:01
@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
add a comment
up vote41down vote
According to this SO link you can print a specific div with
w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerHTML);
w.print();
w.close();
shareimprove this answer
edited May 23 '17 at 12:10
Community♦
11
answered Jun 3 '13 at 10:35
Jaay
1,2691024
7
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
6
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
2
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 Aug 19 '17 at 8:14
add a comment
up vote10down vote
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>
</body>
</html>
shareimprove this answer
answered Jul 25 '14 at 12:27
Panchal Deep
197212
Not working in IE 11 – Hamed Ali Khan Feb 3 '17 at 13:26
add a comment
up vote2down vote
Below Code May Be Help You :
<html>
<head>
<script>
function printPage(id)
{
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
</div>
<div id="block2">
This is Block 2 content
</div>
Butani Vijay
2,82211841
add a comment
up vote2down vote
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');
shareimprove this answer
answered Jul 4 '14 at 0:26
Alejo JM
631410
Hi Alejo. Clever solution, but it doesn't work in IE. Could you please help me with this
question: stackoverflow.com/questions/49410902 THaNKS! – codeispoetry Mar 21 at 15:56
add a comment
Not the answer you're looking for? Browse other questions tagged javascript html css printing or ask
your own question.
asked
4 years, 10 months ago
viewed
347,631 times
active
6 months ago
Want a php job?
Application Security Engineer
Wikimedia Foundation, Inc.San Francisco, CA
REMOTE
php javascript
Senior/Lead Drupal (PHP) Engineer
Compucorp Ltd.No office location
£20K - £28KREMOTE
php javascript
Engineering Manager (focus PHP, Front-End)
Docler HoldingLuxembourg City, Luxembourg
php mysql
Senior/Lead PHP Engineer
Compucorp Ltd.No office location
£15K - £28KREMOTE
php javascript
Linked
334
Print <div id=“printarea”></div> only?
-1
How to print a search result in CodeIgniter?
0
Is there any option for printing the graphs generated by c3js?
2
Open another page or image in print Preview
0
How to print a .docx file on a printer using javascript and / or php
0
Does anyone know a way to print the loaded page HTML after DOM is completed?
0
Printing a variable from javascript
0
I need a replacement for iFrame printing due to a recent Windows Update
0
How to create print button for each individual html table within a php foreach loop
0
javascript print() specific div without opening a new window: not working in IE
see more linked questions…
Related
665
Why not use tables for layout in HTML?
1940
How do I detect a click outside an element?
1613
How to make div not larger than its contents?
2217
How can I know which radio button is selected via jQuery?
420
In jQuery, how to attach events to dynamic html elements?
1281
How to create an HTML button that acts like a link?
1954
How can I refresh a page with jQuery?
1293
Redirect from an HTML page
932
How to print to stderr in Python?
595
What is VanillaJS?
STACK OVERFLOW
Questions
Jobs
Developer Jobs Directory
Salary Calculator
Help
Mobile
PRODUCTS
Teams
Talent
Ads
Enterprise
COMPANY
About
Press
Work Here
Legal
Privacy Policy
Contact Us
STACK EXCHANGE
NETWORK
Technology
Life / Arts
Culture / Recreation
Science
Other
Blog
Facebook
Twitter
LinkedIn
site design / logo © 2018 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 with attribution
required. rev 2018.4.13.29848