Whats the best way to print the contents of a DIV?
-
1Try print element here– GabeFeb 12, 2010 at 21:38
-
2What do you mean by print? As in a physical printer?– Yuriy FaktorovichFeb 12, 2010 at 21:39
-
"Print" as in to a printer? or to the document?– Ed SchemborFeb 12, 2010 at 21:40
-
4Just as a reference for anyone trying to search for a solution to this question of printing a div. I found the following answer very useful: stackoverflow.com/a/7532581/405117– VikramJun 12, 2012 at 15:07
-
1possible duplicate of Print <div id=printarea></div> only?– Brad WerthSep 19, 2014 at 22:18
31 Answers
Slight changes over earlier version - tested on CHROME
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
-
12This is a quick solution. The ideal solution is to use a separate CSS for printing. Perhaps you can elaborate on the details (requirements) of your problem. Feb 12, 2010 at 22:18
-
11You can reference the stylesheet in the popup window. Add another line of code in between <head> tags: mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); Feb 12, 2010 at 22:32
-
5@Rahil change it to this: mywindow.document.close(); mywindow.focus(); mywindow.print(); mywindow.close();– GaffAug 19, 2013 at 20:40
-
3
-
8It sometimes happens if fails to load print preview, maybe when the content to print is quite big (i noticed it only with Chrome while same page prints perfeclty in Firefox, however i dont exclude it might happen in Firefox or other browsers too). The best way i found is to run the print (and close) only after windows is loaded. So after:
mywindow.document.write(data);
Add this:mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');
And remove:mywindow.print();
andmywindow.close();
– FabiusNov 7, 2015 at 8:58
I think there is a better solution. Make your div to print cover the entire document, but only when it's printed:
@media print {
.myDivToPrint {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
-
5Unfortunately, it won't work in IE quite as expected, see this: stackoverflow.com/questions/975129/… Oct 23, 2012 at 10:31
-
28Content which should overflow onto multiple pages seems to get truncated in Chrome. Jun 12, 2015 at 17:28
-
5You might need to put z-index: 9999999; in case you have other elements positioned higher.– Adam M.Oct 21, 2016 at 12:48
-
4
-
1This is a really elegant solution. However, for some reason it is printing my div twice in both Edge and Chrome. Any ideas why that might be happening?– JoshSep 21, 2022 at 23:04
Note: It's been over 13 years since the plugin mentioned below was written, as noted in the comments. It doesn't work any more due to changed API in jQuery. Feel free to fork and add a pull request!
Although this has been said by @gabe,
If you are using jQuery, you can use my printElement
plugin.
There's a sample, and more information about the plugin.
The usage is rather straight forward, just grab an element with a jQuery selector and print it:
$("#myDiv").printElement();
I hope it helps!
-
328 years later, this will produce "a.browser is undefined" because the .browser call has been removed in jquery 1.9 Aug 24, 2018 at 20:58
-
114 years later and it still doesn't work :) I haven't touched this code since 2009, you're always welcome to fork and submit a pull request!– ErikSep 5, 2022 at 9:18
Using Jquery, simply use this function:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>
Your print button will look like this:
<button id="print" onclick="printContent('id name of your div');" >Print</button>
Edit: If you DO have form data that you need to keep, clone won't copy that, so you'll just need to grab all the form data and replace it after restore as so:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
-
1$('body').html(restorepage); will not work because at that time there is no body element available. therefore it will be better to replace it with location.reload();– DebuggerJun 28, 2015 at 6:22
-
No. If you reload the page you will delete any information in forms, or any other settings that may need to be there. It works perfectly fine. If you'll take the time to look at the code, you'll see that var restorepage DOES have all the page information available to make the replacement. Stop trying to edit my code and either test it for yourself or learn what each of the parts of the function do. Jun 29, 2015 at 0:54
-
This is better. It includes the page design while printing unlike those mentioned above where I still need to put css links from header etc. Thanks!– JorzApr 19, 2018 at 9:22
-
the way you've passed
el
is terrible, especially since using jQ. Much better to simply pass theselector
and get rid of the hard coded#
– RozzAMay 16, 2018 at 2:13 -
I always used this method today I noticed that it is not working properly on android device (Google Chrome). The printable area of page changes every time and contains some extra parts out of
el
. I think the print command is sent when the body is being restored. Jan 1, 2019 at 10:29
i used Bill Paetzke
answer to print a div contain images but it didn't work with google chrome
i just needed to add this line myWindow.onload=function(){
to make it work and here is the full code
<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.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</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>
also if someone just need to print a div with id he doesn't need to load jquery
here is pure javascript code to do this
<html>
<head>
<script type="text/javascript">
function PrintDiv(id) {
var data=document.getElementById(id).innerHTML;
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.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>
i hope this can help someone
-
This worked for me! The camelcase did bite me though as the original answer uses "mywindow" vs. "myWindow". Thanks!– opcodeFeb 5, 2019 at 18:36
-
@Robert:sir i got can not read property document of null in myWindow line? Oct 20, 2021 at 6:29
-
-
@Robert- no sir not redirect to new window but i received null..can you tell me why i returned null? Oct 21, 2021 at 4:14
-
1@emre-ozgun can you please check this stackblitz.com/edit/js-qd6zbz?file=index.js– RobertOct 17, 2022 at 20:07
From here https://forums.asp.net/t/1261525.aspx
<html>
<head>
<script language="javascript">
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<body>
//HTML Page //Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
<div id="div_print">
<h1 style="Color:Red">The Div content which you want to print</h1>
</div>
//Other content you wouldn't like to print //Other content you wouldn't like to print
</body>
</html>
-
1it's needed a modification to split footerStr to 2 parts. because brwoser uses "</body>" as the main end of current page. var footstr1 = "</"; var footstr2 = "body>"; var footerstr=footstr1 +footstr12;– mirzaeiSep 14, 2013 at 5:52
function printdiv(printdivname) {
var headstr = "<html><head><title>Booking Details</title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
This will print the div
area you want and set the content back to as it was. printdivname
is the div
to be printed.
-
it's needed a modification to split footerStr to 2 parts. because brwoser uses "</body>" as the main end of current page. var footstr1 = "</"; var footstr2 = "body>"; var footerstr=footstr1 +footstr12;– mirzaeiSep 14, 2013 at 5:52
-
That's ingenious! But yeah, you do need the hack from mirzaei, otherwhise the body tag breaks and you get broken formatting. With the hack, this works great! You can also even add your own inner wrapper to facilitate special print styles. This should be the accepted answer. Sep 10, 2019 at 19:11
Create a separate print stylesheet that hides all other elements except the content you want to print. Flag it using 'media="print"
when you load it:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This allows you to have a completely different stylesheet loaded for printouts.
If you want to force the browser's print dialog to appear for the page, you can do it like this on load using JQuery:
$(function() { window.print(); });
or triggered off of any other event you want such as a user clicking a button.
-
2Yes that'd work too; it's hard - well, impossible - to know exactly what the scenario is.– PointyFeb 12, 2010 at 21:55
-
I agree that a separate CSS is the ideal solution. And copying the div's contents to a new window is a quick solution. Feb 12, 2010 at 22:16
I think the solutions proposed so far have the following drawbacks:
- The CSS media query solutions assume there is only one div to print.
- The javascript solutions work only on certain browsers.
- Destroying the parent window content and recreating that creates a mess.
I have improved on the solutions above. Here is something that I have tested that works really well with the following benefits.
- Works on all the browsers including IE, Chrome, Safari and firefox.
- Doesn't destroy and reload the parent window.
- Can print any number of DIV's on a page.
- Uses HTML templates to avoid error prone string concatenation.
Key Points to note :
- Have to have a onload="window.print()" on the newly created window.
- Don't call targetwindow.close() or targetwindow.print() from the parent.
- Make sure you do targetwindow.document.close() and target.focus()
- I'm using jquery but you can do the same technique using plain javascript as well.
- You can see this in action here https://math.tools/table/multiplication. You can print each table separately, by clicking on the print button on the box header.
<script id="print-header" type="text/x-jquery-tmpl">
<html>
<header>
<title>Printing Para {num}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
max-width: 300px;
}
</style>
</header>
<body onload="window.print()">
<h2>Printing Para {num} </h2>
<h4>https://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
</body>
</html>
</script>
<script>
$('.printthis').click(function() {
num = $(this).attr("data-id");
w = window.open();
w.document.write(
$("#print-header").html().replace("{num}",num) +
$("#para-" + num).html() +
$("#print-footer").html()
);
w.document.close();
w.focus();
//w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window.
///w.close(); Don't do this otherwise chrome won't work
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
<p class="para" id="para-1">
Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="para" id="para-2">
Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
This was excellent and worked cross-browser much better than accepted results! Dec 16, 2015 at 18:22
I authored a plugin to address this scenario. I was unhappy with the plugins out there, and set out to make something more extensive/configurable.
-
1Thanks a lot for your hard work Jason.....!! Really going to use in my more projects. What a mind blowing plugin man...... Speechless.....– user5084534Aug 16, 2018 at 20:28
-
This plugin is really nice, except on mobile browsers on Android (Edge, Chrome & Firefox) it's printing the entire page even though the print preview shows only the div. Is this a bug in the browsers, in Android, or in the plugin?– VincentMay 3, 2021 at 23:18
-
@Vincent it's an issue with the library code. It cropped up last year, and unfortunately I haven't had the time to dedicate to getting this fixed, but I am likely to get to it in the next 4-6 weeks.– JasonMay 5, 2021 at 14:19
-
1That would be great if you could fix that, but it might interest you to know that I pivoted to try printing an iframe instead and the same problem appeared. Trying to print the iframe only on Android ended up still printing the entire page, so maybe knowing that will help you debug your plugin.– VincentMay 6, 2021 at 15:15
-
@Vincent - that's really interesting, so you used javascript to attempt to print an iframe without printThis and you ran into the same issue?– JasonMay 26, 2021 at 1:29
If you want to have all the styles from the original document (including inline styles) you can use this approach.
- Copy the complete document
- Replace the body with the element your want to print.
Implementation:
class PrintUtil {
static printDiv(elementId) {
let printElement = document.getElementById(elementId);
var printWindow = window.open('', 'PRINT');
printWindow.document.write(document.documentElement.innerHTML);
setTimeout(() => { // Needed for large documents
printWindow.document.body.style.margin = '0 0';
printWindow.document.body.innerHTML = printElement.outerHTML;
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
printWindow.print();
printWindow.close();
}, 1000)
}
}
The accepted solution wasn't working. Chrome was printing a blank page because it wasn't loading the image in time. This approach works:
Edit: It appears the accepted solution was modified after my post. Why the downvote? This solution works as well.
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
Its bit late but I found this to be really really nice!!!
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
-
7An issue you might encounter with this solution when using a framework like Vue or React is losing reactivity from your DOM when you return from the print screen. Sep 9, 2021 at 8:09
-
1In my humble opinion this should be the Number One answer. The current upvoted answer contains document.write which is frown upon and considered bad practice as per this page: stackoverflow.com/questions/802854/… There's also this documentation: HTML: The Living Standard Edition for Web Developers — Last Updated 1 September 2023 html.spec.whatwg.org/dev/… Thanks for posting this answer. Best regards, Sep 4 at 1:08
I know this is an old question, but I solved this problem w jQuery.
function printContents(id) {
var contents = $("#"+id).html();
if ($("#printDiv").length == 0) {
var printDiv = null;
printDiv = document.createElement('div');
printDiv.setAttribute('id','printDiv');
printDiv.setAttribute('class','printable');
$(printDiv).appendTo('body');
}
$("#printDiv").html(contents);
window.print();
$("#printDiv").remove();
}
CSS
@media print {
.non-printable, .fancybox-outer { display: none; }
.printable, #printDiv {
display: block;
font-size: 26pt;
}
}
-
It brings with Header and footer not only divtoprint what to do? Jun 27, 2022 at 4:23
Just use PrintJS
let printjs = document.createElement("script");
printjs.src = "https://printjs-4de6.kxcdn.com/print.min.js";
document.body.appendChild(printjs);
printjs.onload = function (){
printJS('id_of_div_you_want_to_print', 'html');
}
Although @BC answer was the best to print a single page.
But To print multiple pages of A4 size at same time with ctrl+P following solution may help.
@media print{
html *{
height:0px!important;
width:0px !important;
margin: 0px !important;
padding: 0px !important;
min-height: 0px !important;
line-height: 0px !important;
overflow: visible !important;
visibility: hidden ;
}
/*assing myPagesClass to every div you want to print on single separate A4 page*/
body .myPagesClass {
z-index: 100 !important;
visibility: visible !important;
position: relative !important;
display: block !important;
background-color: lightgray !important;
height: 297mm !important;
width: 211mm !important;
position: relative !important;
padding: 0px;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
orphans: 0!important;
widows: 0!important;
overflow: visible !important;
page-break-after: always;
}
@page{
size: A4;
margin: 0mm ;
orphans: 0!important;
widows: 0!important;
}}
- Open a new window
- Open the document object of the new window and write into it a simple document containing nothing but the div you've got and necessary html header etc - you may also want to have the document pull in a stylesheet, depending on your content is
- Put a script in the new page to call window.print()
- Trigger the script
Here is my jquery print plugin
(function ($) {
$.fn.printme = function () {
return this.each(function () {
var container = $(this);
var hidden_IFrame = $('<iframe></iframe>').attr({
width: '1px',
height: '1px',
display: 'none'
}).appendTo(container);
var myIframe = hidden_IFrame.get(0);
var script_tag = myIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
script_tag.appendChild(script);
myIframe.contentWindow.document.body.innerHTML = container.html();
myIframe.contentWindow.document.body.appendChild(script_tag);
myIframe.contentWindow.Print();
hidden_IFrame.remove();
});
};
})(jQuery);
Here is an IFrame solution that works for IE and Chrome:
function printHTML(htmlString) {
var newIframe = document.createElement('iframe');
newIframe.width = '1px';
newIframe.height = '1px';
newIframe.src = 'about:blank';
// for IE wait for the IFrame to load so we can access contentWindow.document.body
newIframe.onload = function() {
var script_tag = newIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
script_tag.appendChild(script);
newIframe.contentWindow.document.body.innerHTML = htmlString;
newIframe.contentWindow.document.body.appendChild(script_tag);
// for chrome, a timeout for loading large amounts of content
setTimeout(function() {
newIframe.contentWindow.Print();
newIframe.contentWindow.document.body.removeChild(script_tag);
newIframe.parentElement.removeChild(newIframe);
}, 200);
};
document.body.appendChild(newIframe);
}
Note: This works with jQuery enabled sites only
It is very simple with this cool trick. It worked for me in Google Chrome browser. Firefox wont allow you to print to PDF without a plugin.
- First, open the inspector using (Ctrl + Shift + I) / (Cmd + Option + I).
- Type this code in the console:
var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
- It launches the print dialog. Take a physical print or save it to PDF(in chrome). Done!
The logic is simple. We are creating a new script tag and attaching it in front of closing body tag. We injected a jQuery print extension into the HTML. Change myDivWithStyles with your own Div tag ID. Now it takes cares of preparing a printable virtual window.
Try it on any site. Only caveat is sometimes trickily written CSS can cause missing of styles. But we get the content most of times.
In Opera, try:
print_win.document.write('</body></html>');
print_win.document.close(); // This bit is important
print_win.print();
print_win.close();
-
This is of course an old answer, but for anyone who comes across this more recently this will not reliably work in modern browsers with https. The print window pops up then immediately closes. Jan 4 at 18:50
Created something generic to use on any HTML element
HTMLElement.prototype.printMe = printMe;
function printMe(query){
var myframe = document.createElement('IFRAME');
myframe.domain = document.domain;
myframe.style.position = "absolute";
myframe.style.top = "-10000px";
document.body.appendChild(myframe);
myframe.contentDocument.write(this.innerHTML) ;
setTimeout(function(){
myframe.focus();
myframe.contentWindow.print();
myframe.parentNode.removeChild(myframe) ;// remove frame
},3000); // wait for images to load inside iframe
window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();
Hope this helps.
I modified @BillPaetski answer to use querySelector, add optional CSS, remove the forced H1 tag and make title optionally specified or pulled from window. It also doesn't auto-print any more and exposes internals so they can be switched out in wrapper function or as you like.
The only two private vars are tmpWindow and tmpDoc although I believe title, css and elem access may vary it should be assumed all function arguments are private.
Code:function PrintElem(elem, title, css) {
var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
var tmpDoc = tmpWindow.document;
title = title || document.title;
css = css || "";
this.setTitle = function(newTitle) {
title = newTitle || document.title;
};
this.setCSS = function(newCSS) {
css = newCSS || "";
};
this.basicHtml5 = function(innerHTML) {
return '<!doctype html><html>'+(innerHTML || "")+'</html>';
};
this.htmlHead = function(innerHTML) {
return '<head>'+(innerHTML || "")+'</head>';
};
this.htmlTitle = function(title) {
return '<title>'+(title || "")+'</title>';
};
this.styleTag = function(innerHTML) {
return '<style>'+(innerHTML || "")+'</style>';
};
this.htmlBody = function(innerHTML) {
return '<body>'+(innerHTML || "")+'</body>';
};
this.build = function() {
tmpDoc.write(
this.basicHtml5(
this.htmlHead(
this.htmlTitle(title) + this.styleTag(css)
) + this.htmlBody(
document.querySelector(elem).innerHTML
)
)
);
tmpDoc.close(); // necessary for IE >= 10
};
this.print = function() {
tmpWindow.focus(); // necessary for IE >= 10*/
tmpWindow.print();
tmpWindow.close();
};
this.build();
return this;
}
Usage:
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();
-
Also, it does not copy the values of the
<input>
elements. How can I use this including what the user has typed? Jul 18, 2017 at 2:47 -
@Malky.Kid please think about what you're asking. If you want to print a form, you need to hook blur events on form elements, and set the attribute value, selected, default and innerText of
<input>
,<select>
,<textarea>
compontents to be their runtime value. There are alternatives, but it's not a problem with this script, but a problem with how browsers work, and getinnerHTML
property of documents with inputs, canvas etc.– MrMeseesJul 22, 2017 at 18:02 -
I've already arrived at a solution by via
.attr('value',)
. I've even done it for textarea (by appending) and checkboxes (.attr('checked',)
). I'm sorry if I wasn't thinking enough about what I was asking. Jul 23, 2017 at 23:29 -
Care to share with the class? maybe a gist or something in the comments. I'll upvote it.– MrMeseesJul 24, 2017 at 8:38
This should work:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
HTML > HEAD
<script type="text/javascript">
function printDiv() {
var divToPrint = document.getElementById('printArea');
//Firefox was just opening a new window with same content as opener and not performing the printing dialog, so needed to make it open a new instance of the window opener
newWin= window.open(self.location.href);
//We want to format the document appropriately
newWin.document.write("\<!DOCTYPE html\>\<html lang='es'\>\<head\>\<meta charset='utf-8'\/\>\<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'\>\<meta name='HandheldFriendly' content='true'\/\>");
//HTML ELEMENTS THAT WE WANT TO HIDE FROM THE PRINTING AREA
newWin.document.write("<style type='text/css'>@media print{.dataTables_info,.dataTables_filter{height:0!important;width:0!important;margin:0!important;padding:0!important;min-height:0!important;line-height:0!important;overflow:visible!important;visibility:hidden}");
//General Styling for Printing
newWin.document.write("body {z-index:100!important;visibility:visible!important;position:relative!important;display:block!important;background-color:lightgray!important;height:297mm!important;width:211mm!important;position:relative!important;padding:0;top:0!important;left:0!important;margin:0!important;orphans:0!important;widows:0!important;overflow:visible!important;page-break-after:always}");
//Some forced styling in css rules includying page break for a div
newWin.document.write("body h1{font-size:1em; font-family:Verdana;} a.marked{color:black; text-decoration:none} .pagebreak { page-break-before: always; } ");
newWin.document.write("@page{size:A4; margin:2em; orphans:0!important;widows:0!important}}</style>\<\/head>\<body>");
newWin.document.write(divToPrint.innerHTML);
newWin.document.write("</body></html>");
newWin.focus();
newWin.print();
}
</script>
HTML > BODY
<div id="printArea">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<!-- Page break -->
<div class="pagebreak"> </div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
function printDomElement(element) {
element.classList.add("printCss");
let printId = "printId";
let name = ".printCss";
let rules = "-webkit-print-color-adjust:exact;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;";
var style = document.createElement('style');
style.id = printId;
style.media = "print";
document.getElementsByTagName('head')[0].appendChild(style);
if (!(style.sheet || {}).insertRule)(style.styleSheet || style.sheet).addRule(name, rules);
else style.sheet.insertRule(name + "{" + rules + "}", 0);
window.print();
setTimeout(() => {
element.classList.remove("printCss");
let elem = document.getElementById(printId);
if (elem) elem.remove();
}, 500);
}
The below code copies all relevant nodes that are targeted by the query selector, copies over their styles as seen on screen, since many parent elements used for targeting the css selectors will be missing. This causes a bit of lag if there are a lot of child nodes with a lot of styles.
Ideally you'd have a print style sheet ready, but this is for use cases where there's no print style sheet to be inserted and you wish to print as seen on screen.
If you copy the below items in the browser console on this page it will print all the code snippets on this page.
+function() {
/**
* copied from https://stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
* @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
*/
var copyComputedStyle = function(from,to){
var computed_style_object = false;
//trying to figure out which style object we need to use depense on the browser support
//so we try until we have one
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);
//if the browser dose not support both methods we will return null
if(!computed_style_object) return null;
var stylePropertyValid = function(name,value){
//checking that the value is not a undefined
return typeof value !== 'undefined' &&
//checking that the value is not a object
typeof value !== 'object' &&
//checking that the value is not a function
typeof value !== 'function' &&
//checking that we dosent have empty string
value.length > 0 &&
//checking that the property is not int index ( happens on some browser
value != parseInt(value)
};
//we iterating the computed style object and compy the style props and the values
for(property in computed_style_object)
{
//checking if the property and value we get are valid sinse browser have different implementations
if(stylePropertyValid(property,computed_style_object[property]))
{
//applying the style property to the target element
to.style[property] = computed_style_object[property];
}
}
};
// Copy over all relevant styles to preserve styling, work the way down the children tree.
var buildChild = function(masterList, childList) {
for(c=0; c<masterList.length; c++) {
var master = masterList[c];
var child = childList[c];
copyComputedStyle(master, child);
if(master.children && master.children.length > 0) {
buildChild(master.children, child.children);
}
}
}
/** select elements to print with query selector **/
var printSelection = function(querySelector) {
// Create an iframe to make sure everything is clean and ordered.
var iframe = document.createElement('iframe');
// Give it enough dimension so you can visually check when modifying.
iframe.width = document.width;
iframe.height = document.height;
// Add it to the current document to be sure it has the internal objects set up.
document.body.append(iframe);
var nodes = document.querySelectorAll(querySelector);
if(!nodes || nodes.length == 0) {
console.error('Printing Faillure: Nothing to print. Please check your querySelector');
return;
}
for(i=0; i < nodes.length; i++) {
// Get the node you wish to print.
var origNode = nodes[i];
// Clone it and all it's children
var node = origNode.cloneNode(true);
// Copy the base style.
copyComputedStyle(origNode, node);
if(origNode.children && origNode.children.length > 0) {
buildChild(origNode.children, node.children);
}
// Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.
iframe.contentWindow.document.body.append(node);
}
// Print the window
iframe.contentWindow.print();
// Give the browser a second to gather the data then remove the iframe.
window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
}
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')
This is realy old post but here is one my update what I made using correct answer. My solution also use jQuery.
Point of this is to use proper print view, include all stylesheets for the proper formatting and also to be supported in the most browsers.
function PrintElem(elem, title, offset)
{
// Title constructor
title = title || $('title').text();
// Offset for the print
offset = offset || 0;
// Loading start
var dStart = Math.round(new Date().getTime()/1000),
$html = $('html');
i = 0;
// Start building HTML
var HTML = '<html';
if(typeof ($html.attr('lang')) !== 'undefined') {
HTML+=' lang=' + $html.attr('lang');
}
if(typeof ($html.attr('id')) !== 'undefined') {
HTML+=' id=' + $html.attr('id');
}
if(typeof ($html.attr('xmlns')) !== 'undefined') {
HTML+=' xmlns=' + $html.attr('xmlns');
}
// Close HTML and start build HEAD
HTML+='><head>';
// Get all meta tags
$('head > meta').each(function(){
var $this = $(this),
$meta = '<meta';
if(typeof ($this.attr('charset')) !== 'undefined') {
$meta+=' charset=' + $this.attr('charset');
}
if(typeof ($this.attr('name')) !== 'undefined') {
$meta+=' name=' + $this.attr('name');
}
if(typeof ($this.attr('http-equiv')) !== 'undefined') {
$meta+=' http-equiv=' + $this.attr('http-equiv');
}
if(typeof ($this.attr('content')) !== 'undefined') {
$meta+=' content=' + $this.attr('content');
}
$meta+=' />';
HTML+= $meta;
i++;
}).promise().done(function(){
// Insert title
HTML+= '<title>' + title + '</title>';
// Let's pickup all CSS files for the formatting
$('head > link[rel="stylesheet"]').each(function(){
HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
i++;
}).promise().done(function(){
// Print setup
HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';
// Finish HTML
HTML+= '</head><body>';
HTML+= '<h1 class="text-center mb-3">' + title + '</h1>';
HTML+= elem.html();
HTML+= '</body></html>';
// Open new window
var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
// Append new window HTML
printWindow.document.write(HTML);
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
/* Make sure that page is loaded correctly */
$(printWindow).on('load', function(){
setTimeout(function(){
// Open print
printWindow.print();
// Close on print
setTimeout(function(){
printWindow.close();
return true;
}, 3);
}, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
});
});
});
}
Later you simple need something like this:
$(document).on('click', '.some-print', function() {
PrintElem($(this), 'My Print Title');
return false;
});
Try it.
pass the Element to this function to print:
function printElm(elm) {
var orig = document.body.innerHTML;
document.body.innerHTML = elm.outerHTML;
print();
document.body.innerHTML = orig;
}
Same as best answer, just in case you need to print image as i did:
In case you want to print image:
function printElem(elem)
{
Popup(jQuery(elem).attr('src'));
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<img src="'+data+'" />');
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
-
You're missing a
load
event on the popup. Without it you'll print a blank page since the image isn't loaded. =>$(popup).load(function(){ popup.focus(); popup.print(); });
Apr 29, 2016 at 11:30