Asked 12 years, 7 months ago
Viewed 958k times
Whats the best way to print the contents of a DIV?
Bill Paetzke
13.1k6 gold badges43 silver badges44 bronze badges
asked Feb 12, 2010 at 21:37
6
Slight changes over earlier version - tested on CHROME
function PrintElem[elem]
{
var mywindow = window.open['', 'PRINT', 'height=400,width=600'];
mywindow.document.write['' + document.title + ''];
mywindow.document.write[''];
mywindow.document.write['' + document.title + '
'];
mywindow.document.write[document.getElementById[elem].innerHTML];
mywindow.document.write[''];
mywindow.document.close[]; // necessary for IE >= 10
mywindow.focus[]; // necessary for IE >= 10*/
mywindow.print[];
mywindow.close[];
return true;
}
dotancohen
28.6k33 gold badges133 silver badges192 bronze badges
answered Feb 12, 2010 at 22:06
Bill PaetzkeBill Paetzke
13.1k6 gold badges43 silver badges44 bronze badges
30
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;
}
}
answered Aug 23, 2011 at 20:54
BC.BC.
23.5k12 gold badges46 silver badges62 bronze badges
8
EDIT It's been over 13 years since the plugin mentioned below was written, as per 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 here, and more information about the plugin here.
The usage is rather straight forward, just grab an element with a jQuery selector and print it:
$["#myDiv"].printElement[];
I hope it helps!
answered Sep 26, 2010 at 14:57
ErikErik
8327 silver badges8 bronze badges
2
Using Jquery, simply use this function:
function printContent[el]{
var restorepage = $['body'].html[];
var printcontent = $['#' + el].clone[];
$['body'].empty[].html[printcontent];
window.print[];
$['body'].html[restorepage];
}
Your print button will look like this:
Print
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:
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];
}
answered Feb 11, 2015 at 6:18
Print Para 1 Print Para 2
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.
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.
Husam Ebish
3,4672 gold badges18 silver badges33 bronze badges
answered Oct 20, 2015 at 15:57
dorsdors
1,10210 silver badges19 bronze badges
1
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['' + 'window.onload = function[] { window.print[]; window.close[]; };' + ''];
w.document.close[]; // necessary for IE >= 10
w.focus[]; // necessary for IE >= 10
return true;
}
answered Nov 2, 2016 at 21:15
live-lovelive-love
44k22 gold badges216 silver badges187 bronze badges
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]
}
}
answered Mar 15, 2018 at 14:26
2
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;
}
}
ROOT
11k5 gold badges30 silver badges43 bronze badges
answered Jan 6, 2013 at 22:17
JazzyJazzy
5,88910 gold badges50 silver badges72 bronze badges
1
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;
}}
answered Jan 19, 2014 at 6:55
arslanarslan
5651 gold badge7 silver badges25 bronze badges
- 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
answered Feb 12, 2010 at 21:53
PointyPointy
394k59 gold badges575 silver badges607 bronze badges
Here is my jquery print plugin
[function [$] {
$.fn.printme = function [] {
return this.each[function [] {
var container = $[this];
var hidden_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];
answered Jul 27, 2012 at 10:56
karaxunakaraxuna
26.5k13 gold badges81 silver badges114 bronze badges
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];
}
answered May 19, 2014 at 0:04
kofifuskofifus
15.2k12 gold badges91 silver badges143 bronze badges
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 = "//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.
anitag95
1871 silver badge15 bronze badges
answered Dec 7, 2017 at 10:02
Naren YellavulaNaren Yellavula
6,7882 gold badges28 silver badges22 bronze badges
Just use PrintJS
let printjs = document.createElement["script"];
printjs.src = "//printjs-4de6.kxcdn.com/print.min.js";
document.body.appendChild[printjs];
printjs.onload = function []{
printJS['id_of_div_you_want_to_print', 'html'];
}
answered Jan 29, 2021 at 10:25
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 =
"" +
divElements + "";
//Print Page
window.print[];
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
answered Jun 8, 2021 at 0:19
ShedrackShedrack
5794 silver badges19 bronze badges
1
In Opera, try:
print_win.document.write[''];
print_win.document.close[]; // This bit is important
print_win.print[];
print_win.close[];
Josh
1,8043 gold badges18 silver badges31 bronze badges
answered Feb 19, 2013 at 18:02
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.
Pang
9,223146 gold badges85 silver badges118 bronze badges
answered Apr 2, 2016 at 11:29
GauravGaurav
8139 silver badges11 bronze badges
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 ''+[innerHTML || ""]+'';
};
this.htmlHead = function[innerHTML] {
return ''+[innerHTML || ""]+'';
};
this.htmlTitle = function[title] {
return ''+[title || ""]+'';
};
this.styleTag = function[innerHTML] {
return ''+[innerHTML || ""]+'';
};
this.htmlBody = function[innerHTML] {
return ''+[innerHTML || ""]+'';
};
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[];
answered Feb 15, 2017 at 10:17
MrMeseesMrMesees
1,39818 silver badges22 bronze badges
4
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;
}
answered Apr 14, 2021 at 13:39
HTML > HEAD
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["\\\\\\"];
//HTML ELEMENTS THAT WE WANT TO HIDE FROM THE PRINTING AREA
newWin.document.write["@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 h2{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}}\\"];
newWin.document.write[divToPrint.innerHTML];
newWin.document.write[""];
newWin.focus[];
newWin.print[];
}
HTML > BODY
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.
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].
answered Jul 26, 2021 at 19:54
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 //stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
* @author Adi Darachi //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 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']
answered Aug 1, 2018 at 12:13
TschallackaTschallacka
26.9k13 gold badges89 silver badges130 bronze badges
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 = '';
// Get all meta tags
$['head > meta'].each[function[]{
var $this = $[this],
$meta = '';
HTML+= $meta;
i++;
}].promise[].done[function[]{
// Insert title
HTML+= '' + title + '';
// Let's pickup all CSS files for the formatting
$['head > link[rel="stylesheet"]'].each[function[]{
HTML+= '';
i++;
}].promise[].done[function[]{
// Print setup
HTML+= 'body{display:none;}@media print{body{display:block;}}';
// Finish HTML
HTML+= '';
HTML+= '' + title + '
';
HTML+= elem.html[];
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.
answered Jan 21, 2019 at 13:29
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;
}
Lee Taylor
7,61116 gold badges33 silver badges48 bronze badges
answered Jun 25 at 12:12
MahdiMahdi
496 bronze badges
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];
}
answered Aug 17 at 4:11
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['my div'];
mywindow.document.write[''];
mywindow.document.write[''];
mywindow.document.write[''];
mywindow.print[];
mywindow.close[];
return true;
}
answered Oct 17, 2013 at 19:38
1