Related
How do I print the indicated div (without manually disabling all other content on the page)?
I want to avoid a new preview dialog, so creating a new window with this content is not useful.
The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not show in print.
Here is a general solution, using CSS only, which I have verified to work.
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
Alternative approaches aren't so good. Using display is tricky because if any element has display:none then none of its descendants will display either. To use it, you have to change the structure of your page.
Using visibility works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move section-to-print to the top left so it prints properly.
I have a better solution with minimal code.
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!" />
Then add an event like an onclick (as shown above), and pass the id of the div like I did above.
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;
}
Notice how simple this is? No popups, no new windows, no crazy styling, no JS libraries like jquery. The problem with really complicated solutions (the answer isn't complicated and not what I'm referring to) is the fact that it will NEVER translate across all browsers, ever! If you want to make the styles different, do as shown in the checked answer by adding the media attribute to a stylesheet link (media="print").
No fluff, lightweight, it just works.
All the answers so far are pretty flawed - they either involve adding class="noprint" to everything or will mess up display within #printable.
I think the best solution would be to create a wrapper around the non-printable stuff:
<head>
<style type="text/css">
#printable { display: none; }
#media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Of course this is not perfect as it involves moving things around in your HTML a bit...
With jQuery it's as simple as this:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
Could you use a print stylesheet, and use CSS to arrange the content you wanted printed? Read this article for more pointers.
I didn't really like any of these answers as a whole. If you have a class (say printableArea) and have that as an immediate child of body, then you can do something like this in your print CSS:
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
For those looking for printableArea in another place, you would need to make sure the parents of printableArea are shown:
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
Using the visibility can cause a lot of spacing issues and blank pages. This is because the visibility maintains the elements space, just makes it hidden, where as display removes it and allows other elements to take up its space.
The reason why this solution works is that you are not grabbing all elements, just the immediate children of body and hiding them. The other solutions below with display css, hide all the elements, which effects everything inside of printableArea content.
I wouldn't suggest javascript as you would need to have a print button that the user clicks and the standard browser print buttons wouldn't have the same effect. If you really need to do that, what I would do is store the html of body, remove all unwanted elements, print, then add the html back. As mentioned though, I would avoid this if you can and use a CSS option like above.
NOTE: You can add whatever CSS into the print CSS using inline styles:
<style type="text/css">
#media print {
//styles here
}
</style>
Or like I usually use is a link tag:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Give whatever element you want to print the id printMe.
Include this script in your head tag:
<script language="javascript">
var gAutoPrint = true;
function processPrint(){
if (document.getElementById != null){
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null){
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0) html += headTags[0].innerHTML;
}
html += '\n</HE' + 'AD>\n<BODY>\n';
var printReadyElem = document.getElementById("printMe");
if (printReadyElem != null) html += printReadyElem.innerHTML;
else{
alert("Error, no contents.");
return;
}
html += '\n</BO' + 'DY>\n</HT' + 'ML>';
var printWin = window.open("","processPrint");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint) printWin.print();
} else alert("Browser not supported.");
}
</script>
Call the function
Print
Step 1: Write the following javascript inside your head tag
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Step 2: Call the PrintMe('DivID') function by an onclick event.
<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
window.print();
document.body.innerHTML = originalContents;
}
</script>
The Best way to Print particular Div or any Element
printDiv("myDiv");
function printDiv(id){
var printContents = document.getElementById(id).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
hm ... use the type of a stylsheet for printing ... eg:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css:
div { display: none; }
#yourdiv { display: block; }
Without CSS clowning, html and pure javascript with iframe does its work best. Then simply click the text, you want to print. Current example for id elements with text content;
html body:
<div id="monitor" onclick="idElementPrint()">text i want to print</div>
pure javascript:
//or: monitor.textContent = "click me to print textual content";
const idElementPrint = () => {
let ifram = document.createElement("iframe");
ifram.style = "display:none";
document.body.appendChild(ifram);
pri = ifram.contentWindow;
pri.document.open();
pri.document.write(monitor.textContent);
pri.document.close();
pri.focus();
pri.print();
}
printDiv(divId): A generalized solution to print any div on any page.
I had a similar issue but I wanted (a) to be able to print the whole page, or (b) print any one of several specific areas. My solution, thanks to much of the above, allows you to specify any div object to be printed.
The key for this solution is to add an appropriate rule to the the print media style sheet so that the requested div (and its contents) will be printed.
First, create the needed print css to suppress everything (but without the specific rule to allow the element you want to print).
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
Note that I have added new class rules:
noprintarea allows you to suppress the printing of elements within your div- both the content and the block.
noprintcontent allows you to suppress the printing of elements within your div- the content is suppressed but and the allocated area is left empty.
print allows you to have items that show up in the printed version but
not on the screen page. These will normally have "display:none" for the screen style.
Then insert three JavaScript functions. The first merely toggles the print media style sheet on and off.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
The second does the real work and the third cleans up afterward. The second (printDiv) activates the print media style sheet, then appends a new rule to allow the desired div to print, issues the print, and then adds a delay before the final housekeeping (otherwise the styles can be reset before the print is actually done.)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
The final functions deletes the added rule and sets the print style again to disabled so the whole page can be printed.
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
The only other thing to do is to add one line to your onload processing so that the print style is initially disabled thereby allowing whole page printing.
<body onLoad='disableSheet(0,true)'>
Then, from anywhere in your document, you can print a div. Just issue printDiv("thedivid") from a button or whatever.
A big plus for this approach it provides a general solution to printing selected content from within a page. It also allows use of existing styles for elements that are printed - including the containing div.
NOTE: In my implementation, this must be the first style sheet. Change the sheet references (0) to the appropriate sheet number if you need to make it later in the sheet sequence.
With CSS 3 you could use the following:
body *:not(#printarea) {
display: none;
}
Sandro's method works great.
I tweaked it to allow for allowing multiple printMe links, particularily to be used in tabbed pages and expanding text.
function processPrint(printMe){ <-- calling for a variable here
var printReadyElem = document.getElementById(printMe); <-- removed the quotes around printMe to ask for a variable
Print <-- passing the div ID to be printed on to the function to turn the printMe variable into the div ID. single quotes are needed
#Kevin Florida
If you have multiple divs with same class, you can use it like this:
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>
i was using Colorbox inner content type
$(document).on('click', '.printdiv-btn', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $('body').html();
var printArea = $this.parents('.printableArea').html();
$('body').html(printArea);
window.print();
$('body').html(originalContent);
});
In my case I had to print a image inside a page. When I used the solution voted, I had 1 blank page and the other one showing the image. Hope it will help someone.
Here is the css I used:
#media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}
My html is:
<div id="not-print" >
<header class="row wrapper page-heading">
</header>
<div class="wrapper wrapper-content">
<%= image_tag #qrcode.image_url, size: "250x250" , alt: "#{#qrcode.name}" %>
</div>
</div>
<div id="to-print" style="display: none;">
<%= image_tag #qrcode.image_url, size: "300x300" , alt: "#{#qrcode.name}" %>
</div>
One more approch without affecting current page and it also persist the css while printing. Here selector must be specific div selector which content we need to print.
printWindow(selector, title) {
var divContents = $(selector).html();
var $cssLink = $('link');
var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth * 0.6);
printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
for(var i = 0; i<$cssLink.length; i++) {
printWindow.document.write($cssLink[i].outerHTML);
}
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload = function () {
printWindow.focus();
setTimeout( function () {
printWindow.print();
printWindow.close();
}, 100);
}
}
Here provided some time out show that external css get applied to it.
Best css to fit space empty height:
#media print {
body * {
visibility: hidden;
height:0;
}
#section-to-print, #section-to-print * {
visibility: visible;
height:auto;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
All answers have trade-offs and cannot be used for all cases. They fall into 3 categories:
Use a printing style sheet. This requires building the whole website to be print-aware.
Hide all elements in <body> and only show the printable element. This works nicely for simple pages, but it is tricky for complex pages.
Open a new window with the content of the printable element or replace the <body> content with the content of the element. The first will lose all styles, and the second is messy and can break events.
There is no one solution that will work well for all cases, so it is good to have all those choices and I'm adding another solution that works much better in some cases. This solution is a hybrid of two categories: hide all content of <body>, then copy the content of the printable element to a new <div> and append it to <body>. After printing, remove the newly added <div> and show the content of <body> back. This way, you won't lose the styles or events, and you don't mess up with opening a new window. But like all other solutions, it won't work well for all cases. If your printable element's styles depends on its parents, you'll lose those styles. It is still much easier to style your printable elements independently from its parents than having to style the entire website for printing.
The only hurdle is figuring out how to select all content of <body>. For simple pages, the generic style body>* will do the trick. However, complex pages usually have <script> tags at the end of body' and also some `s that are used for dialogs, etc. Hiding all those is fine, but you don't want to show them after printing.
In my case, I build all may websites with three sections inside <body>: <header>, <footer>, and between them <div id="Content">. Adjust the first line of the function below for your case:
function PrintArea(selector) {
//First hide all content in body.
var all = $("body > header, body > #Content, body > footer")
all.hide();
//Append a div for printing.
$("body").append('<div id="PrintMe">');
//Copy content of printing area to the printing div.
var p = $("#PrintMe");
p.html($(selector).html());
//Call the print dialog.
window.print();
//Remove the printing div.
p.remove();
//Show all content in body.
all.show();
}
I used jQuery because it's cleaner and simpler, but you can easily convert it to vanilla JavaScript if you like. And of course, you can change var to let as recommended for the local variables.
It's better solution. You can use it Angualr/React
Html
<div class="row" id="printableId">
Your html
</div>
Javascript
function printPage(){
var printHtml = window.open('', 'PRINT', 'height=400,width=600');
printHtml.document.write('<html><head>');
printHtml.document.write(document.getElementById("printableId").innerHTML);
printHtml.document.write('</body></html>');
printHtml.document.close();
printHtml.focus(); = 10*/
printHtml.print();
printHtml.close();
return true;
}
I picked up the content using JavaScript and created a window that I could print in stead...
The printDiv() function came out a few times, but in that case, you loose all your binding elements and input values. So, my solution is to create a div for everything called "body_allin" and another one outside the first one called "body_print".
Then you call this function:
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}
You could use a separate CSS style which disables every other content except the one with the id "printarea".
See CSS Design: Going to Print for further explanation and examples.
I tried many of the solutions provided.None of them worked perfectly. They either lose CSS or JavaScript bindings. I found a perfect and easy solution that neither losses CSS nor JavaScript bindings.
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
Javascript:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
I'm very late to this party, but I'd like to pitch in with yet another approach. I wrote a tiny JavaScript module called PrintElements for dynamically printing parts of a webpage.
It works by iterating through selected node elements, and for each node, it traverses up the DOM tree until the BODY element. At each level, including the initial one (which is the to-be-printed node’s level), it attaches a marker class (pe-preserve-print) to the current node. Then attaches another marker class (pe-no-print) to all siblings of the current node, but only if there is no pe-preserve-print class on them. As a third act, it also attaches another class to preserved ancestor elements pe-preserve-ancestor.
A dead-simple supplementary print-only css will hide and show respective elements. Some benefits of this approach is that all styles are preserved, it does not open a new window, there is no need to move around a lot of DOM elements, and generally it is non-invasive with your original document.
See the demo, or read the related article for further details.
I found the solution.
#media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
#page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}
I tried many of the solutions provided.None of them worked perfectly. They either lose CSS or doesn't work in all browsers. I found a perfect and easy solution that neither losses CSS and work perfectly for all browsers.
Html
<div class="row" id="print-div">
Your html
</div>
TYPESCRIPT
let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
.write(`<html>
${printHead}
<body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();
My approach - Simple CSS and JS. Works on React/NextJS too.
const handlePrint = e => {
e.preventDefault();
const bodyElement = document.getElementsByTagName('body')[0];
bodyElement.classList.add('printing');
window.print();
bodyElement.classList.remove('printing');
};
.printing {
visibility:hidden;
}
.printView {
visibility:visible;
}
.printing .printView {
/* You can have any CSS here to make the view better on print */
position:absolute;
top:0;
}
What it does?
Adds .printing class to body element. With CSS we hide all body content with visibility:hidden;
At the same time, we keep CSS ready with .printing .printView to have any kind of view we want for the print area.
Trigger window.print();
Remove .printing class from the body element when the user cancels / prints.
Example:
<button onclick="handlePrint">
Download PDF
</button>
<div>
<h1>Don't print this</h1>
<div class="printView">Print this</div>
</div>
Let me know if this helps anyone :)
Use a special Stylesheet for printing
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
and then add a class i.e. "noprint" to every tag which's content you don't want to print.
In the CSS use
.noprint {
display: none;
}
below is my code, I'm trying to make the content wrapped in div tag change the background color when the mouse curse over it, if the one of the content's variable starts with *. But it doesn't work...
// html
<style>
.normal{background-color: white}
.change{background-color: gainsboro}
</style>
<div ng-mouseover="checkAs(this)" ng-mouseout="this.className='normal'">
......
</div>
// js
$scope.checkAs = function(obj) {
var name = $scope.opportunity.name;
var asterisk = '*';
if(name.startsWith(asterisk)) {
obj.className='change';
} else {
obj.className='normal';
}
};
If you are determined to do this in angular, you would have to call a function through ng-mouseover and in that function, you would need a selector such as JQuery or Javascript's query selector, then modify the element as you see fit. You would have to do something like this (using JQuery):
$scope.checkAs = function() {
$("div").hover(function() {
$(this).prop('background-color','gainsboro');
}, function(){
$(this).prop('background-color','white');
});
};
But, as PSL suggested, the "this" in checkAs(this) won't be the DOM element. A CSS solution might be better:
div :hover{
background-color: gainsboro
}
Is there a way to represent this code as plain vanilla Javascript so I can better understand how it works for now?
$("#id").click(function(){
var $x = $("#id");
$x.removeProp("-webkit-animation");
});
Essentially I'm using this to tell the code not to play a css animation given that a certain set of parameters are met.
removeProp removes properties of objects. If that’s definitely what you want, the equivalent is the delete operator:
var element = document.getElementById("id");
element.addEventListener("click", function () {
delete element["-webkit-animation"];
});
If what you really want to do is change a CSS property, though, it needs to be an operation on the element’s style:
element.style.WebkitAnimation = "none";
But what you should probably do is change a class instead:
element.classList.add("no-animation");
and use CSS:
.no-animation {
-webkit-animation: none;
}
The delete element is the somewhat equivalent on vanilla javascript of removeProp()
element = document.getElementById('id');
element.onclick() = function(){
delete element['-webkit-animation'];
}
Yes, you can use the .removeAttribute() function to remove an attribute, like style, title, etc.
Or you can use .removeProperty() to remove a style property (supported in IE9 and above)
Fiddle
(function() {
var myDiv = document.getElementById('myDiv');
myDiv.removeAttribute('style');
var aDiv = document.getElementById('aDiv');
aDiv.style.removeProperty('height');
})();
<div id="aDiv" style="background-color: green;">Hi</div>
<div id="myDiv" style="background-color: green;">Hi</div>
Hope it will help OP
JS
var element = document.getElementById("id");
element.onClick = function(){
this.style.removeProperty("-webkit-animation");
};
I am making a price estimator.
How would correctly write a jQuery function that checks a variable and depending on that amount hides/shows a certain div element accordingly.
So if I had:
a HTML div with the ID 'Answer'
<div id="answer">Hide Me</div>
$("#answer")...
a variable (this variable would change)
var x = 30
Now I know the css to hide the div would be:
#answer{
visibilty:hidden;
}
What would be the correct way to hide the function checking these certain parameters? for example if x > 20 then hide etc
Now I know there will be many ways to do this and they may not require jQuery, please inform me if this is the case. Perhaps it just needs JS. I know there will be many ways to do it not just one so if you have a different way please comment as I am keen to learn.
Any help would be greatly appreciated.
Cheers
F
Note that you can also remove or add a class:
$('#answer').removeClass('hide');
$('#answer').addClass('hide');
But what you want to do is $('#answer').hide(); or $('#answer').show();
Execute this function providing the variable v:
var checkVar = function(v) {
var target = $('#answer');
if (parseInt(v) > 20) {
target.hide();
} else {
target.show();
}
}
For example, if the variable comes form a selection:
$('#selectId').on('change', function() {
checkVar($(this).val());
});
Remove the CSS. You can do it in jQuery
if(x>20){
$('#answer').hide();
}
You can use this one
$("#answer").hide();
#kapantzak's answer looks good. But keep your logic and style separated and if your not going to use the variable for the actual element twice, I wouldn't make it. So go:
var checkVar = function(var) {
var element = $('#answer');
if (parseInt(var) > 20) {
element.addClass('hidden');
}else{
element.removeClass('hidden');
}
}
And in your CSS go:
#answer.hidden{
display: none;
}
Also, depending on your preference, display: none; doesn't display anything of the object whereas visibility: hidden hides the object but the space the object was occupying will remain occupied.
HTML
<input id="changingValue">
...
<div id="answer">Hide Me</div>
CSS (not mandatory if you check values on loading)
#answer{ display:none;}
JS
var limit = 20;
$(function(){
$("#changingValue").change(function(){
if(parseInt($("#changingValue").val())<limit) { $("#answer").show(); }
else { $("#answer").hide(); }
});
});
How do I print the indicated div (without manually disabling all other content on the page)?
I want to avoid a new preview dialog, so creating a new window with this content is not useful.
The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not show in print.
Here is a general solution, using CSS only, which I have verified to work.
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
Alternative approaches aren't so good. Using display is tricky because if any element has display:none then none of its descendants will display either. To use it, you have to change the structure of your page.
Using visibility works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move section-to-print to the top left so it prints properly.
I have a better solution with minimal code.
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!" />
Then add an event like an onclick (as shown above), and pass the id of the div like I did above.
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;
}
Notice how simple this is? No popups, no new windows, no crazy styling, no JS libraries like jquery. The problem with really complicated solutions (the answer isn't complicated and not what I'm referring to) is the fact that it will NEVER translate across all browsers, ever! If you want to make the styles different, do as shown in the checked answer by adding the media attribute to a stylesheet link (media="print").
No fluff, lightweight, it just works.
All the answers so far are pretty flawed - they either involve adding class="noprint" to everything or will mess up display within #printable.
I think the best solution would be to create a wrapper around the non-printable stuff:
<head>
<style type="text/css">
#printable { display: none; }
#media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Of course this is not perfect as it involves moving things around in your HTML a bit...
With jQuery it's as simple as this:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
Could you use a print stylesheet, and use CSS to arrange the content you wanted printed? Read this article for more pointers.
I didn't really like any of these answers as a whole. If you have a class (say printableArea) and have that as an immediate child of body, then you can do something like this in your print CSS:
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
For those looking for printableArea in another place, you would need to make sure the parents of printableArea are shown:
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
Using the visibility can cause a lot of spacing issues and blank pages. This is because the visibility maintains the elements space, just makes it hidden, where as display removes it and allows other elements to take up its space.
The reason why this solution works is that you are not grabbing all elements, just the immediate children of body and hiding them. The other solutions below with display css, hide all the elements, which effects everything inside of printableArea content.
I wouldn't suggest javascript as you would need to have a print button that the user clicks and the standard browser print buttons wouldn't have the same effect. If you really need to do that, what I would do is store the html of body, remove all unwanted elements, print, then add the html back. As mentioned though, I would avoid this if you can and use a CSS option like above.
NOTE: You can add whatever CSS into the print CSS using inline styles:
<style type="text/css">
#media print {
//styles here
}
</style>
Or like I usually use is a link tag:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Give whatever element you want to print the id printMe.
Include this script in your head tag:
<script language="javascript">
var gAutoPrint = true;
function processPrint(){
if (document.getElementById != null){
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null){
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0) html += headTags[0].innerHTML;
}
html += '\n</HE' + 'AD>\n<BODY>\n';
var printReadyElem = document.getElementById("printMe");
if (printReadyElem != null) html += printReadyElem.innerHTML;
else{
alert("Error, no contents.");
return;
}
html += '\n</BO' + 'DY>\n</HT' + 'ML>';
var printWin = window.open("","processPrint");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint) printWin.print();
} else alert("Browser not supported.");
}
</script>
Call the function
Print
Step 1: Write the following javascript inside your head tag
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Step 2: Call the PrintMe('DivID') function by an onclick event.
<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
window.print();
document.body.innerHTML = originalContents;
}
</script>
The Best way to Print particular Div or any Element
printDiv("myDiv");
function printDiv(id){
var printContents = document.getElementById(id).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
hm ... use the type of a stylsheet for printing ... eg:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css:
div { display: none; }
#yourdiv { display: block; }
Without CSS clowning, html and pure javascript with iframe does its work best. Then simply click the text, you want to print. Current example for id elements with text content;
html body:
<div id="monitor" onclick="idElementPrint()">text i want to print</div>
pure javascript:
//or: monitor.textContent = "click me to print textual content";
const idElementPrint = () => {
let ifram = document.createElement("iframe");
ifram.style = "display:none";
document.body.appendChild(ifram);
pri = ifram.contentWindow;
pri.document.open();
pri.document.write(monitor.textContent);
pri.document.close();
pri.focus();
pri.print();
}
printDiv(divId): A generalized solution to print any div on any page.
I had a similar issue but I wanted (a) to be able to print the whole page, or (b) print any one of several specific areas. My solution, thanks to much of the above, allows you to specify any div object to be printed.
The key for this solution is to add an appropriate rule to the the print media style sheet so that the requested div (and its contents) will be printed.
First, create the needed print css to suppress everything (but without the specific rule to allow the element you want to print).
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
Note that I have added new class rules:
noprintarea allows you to suppress the printing of elements within your div- both the content and the block.
noprintcontent allows you to suppress the printing of elements within your div- the content is suppressed but and the allocated area is left empty.
print allows you to have items that show up in the printed version but
not on the screen page. These will normally have "display:none" for the screen style.
Then insert three JavaScript functions. The first merely toggles the print media style sheet on and off.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
The second does the real work and the third cleans up afterward. The second (printDiv) activates the print media style sheet, then appends a new rule to allow the desired div to print, issues the print, and then adds a delay before the final housekeeping (otherwise the styles can be reset before the print is actually done.)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
The final functions deletes the added rule and sets the print style again to disabled so the whole page can be printed.
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
The only other thing to do is to add one line to your onload processing so that the print style is initially disabled thereby allowing whole page printing.
<body onLoad='disableSheet(0,true)'>
Then, from anywhere in your document, you can print a div. Just issue printDiv("thedivid") from a button or whatever.
A big plus for this approach it provides a general solution to printing selected content from within a page. It also allows use of existing styles for elements that are printed - including the containing div.
NOTE: In my implementation, this must be the first style sheet. Change the sheet references (0) to the appropriate sheet number if you need to make it later in the sheet sequence.
With CSS 3 you could use the following:
body *:not(#printarea) {
display: none;
}
Sandro's method works great.
I tweaked it to allow for allowing multiple printMe links, particularily to be used in tabbed pages and expanding text.
function processPrint(printMe){ <-- calling for a variable here
var printReadyElem = document.getElementById(printMe); <-- removed the quotes around printMe to ask for a variable
Print <-- passing the div ID to be printed on to the function to turn the printMe variable into the div ID. single quotes are needed
#Kevin Florida
If you have multiple divs with same class, you can use it like this:
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>
i was using Colorbox inner content type
$(document).on('click', '.printdiv-btn', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $('body').html();
var printArea = $this.parents('.printableArea').html();
$('body').html(printArea);
window.print();
$('body').html(originalContent);
});
In my case I had to print a image inside a page. When I used the solution voted, I had 1 blank page and the other one showing the image. Hope it will help someone.
Here is the css I used:
#media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}
My html is:
<div id="not-print" >
<header class="row wrapper page-heading">
</header>
<div class="wrapper wrapper-content">
<%= image_tag #qrcode.image_url, size: "250x250" , alt: "#{#qrcode.name}" %>
</div>
</div>
<div id="to-print" style="display: none;">
<%= image_tag #qrcode.image_url, size: "300x300" , alt: "#{#qrcode.name}" %>
</div>
One more approch without affecting current page and it also persist the css while printing. Here selector must be specific div selector which content we need to print.
printWindow(selector, title) {
var divContents = $(selector).html();
var $cssLink = $('link');
var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth * 0.6);
printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
for(var i = 0; i<$cssLink.length; i++) {
printWindow.document.write($cssLink[i].outerHTML);
}
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload = function () {
printWindow.focus();
setTimeout( function () {
printWindow.print();
printWindow.close();
}, 100);
}
}
Here provided some time out show that external css get applied to it.
Best css to fit space empty height:
#media print {
body * {
visibility: hidden;
height:0;
}
#section-to-print, #section-to-print * {
visibility: visible;
height:auto;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
All answers have trade-offs and cannot be used for all cases. They fall into 3 categories:
Use a printing style sheet. This requires building the whole website to be print-aware.
Hide all elements in <body> and only show the printable element. This works nicely for simple pages, but it is tricky for complex pages.
Open a new window with the content of the printable element or replace the <body> content with the content of the element. The first will lose all styles, and the second is messy and can break events.
There is no one solution that will work well for all cases, so it is good to have all those choices and I'm adding another solution that works much better in some cases. This solution is a hybrid of two categories: hide all content of <body>, then copy the content of the printable element to a new <div> and append it to <body>. After printing, remove the newly added <div> and show the content of <body> back. This way, you won't lose the styles or events, and you don't mess up with opening a new window. But like all other solutions, it won't work well for all cases. If your printable element's styles depends on its parents, you'll lose those styles. It is still much easier to style your printable elements independently from its parents than having to style the entire website for printing.
The only hurdle is figuring out how to select all content of <body>. For simple pages, the generic style body>* will do the trick. However, complex pages usually have <script> tags at the end of body' and also some `s that are used for dialogs, etc. Hiding all those is fine, but you don't want to show them after printing.
In my case, I build all may websites with three sections inside <body>: <header>, <footer>, and between them <div id="Content">. Adjust the first line of the function below for your case:
function PrintArea(selector) {
//First hide all content in body.
var all = $("body > header, body > #Content, body > footer")
all.hide();
//Append a div for printing.
$("body").append('<div id="PrintMe">');
//Copy content of printing area to the printing div.
var p = $("#PrintMe");
p.html($(selector).html());
//Call the print dialog.
window.print();
//Remove the printing div.
p.remove();
//Show all content in body.
all.show();
}
I used jQuery because it's cleaner and simpler, but you can easily convert it to vanilla JavaScript if you like. And of course, you can change var to let as recommended for the local variables.
It's better solution. You can use it Angualr/React
Html
<div class="row" id="printableId">
Your html
</div>
Javascript
function printPage(){
var printHtml = window.open('', 'PRINT', 'height=400,width=600');
printHtml.document.write('<html><head>');
printHtml.document.write(document.getElementById("printableId").innerHTML);
printHtml.document.write('</body></html>');
printHtml.document.close();
printHtml.focus(); = 10*/
printHtml.print();
printHtml.close();
return true;
}
I picked up the content using JavaScript and created a window that I could print in stead...
The printDiv() function came out a few times, but in that case, you loose all your binding elements and input values. So, my solution is to create a div for everything called "body_allin" and another one outside the first one called "body_print".
Then you call this function:
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}
You could use a separate CSS style which disables every other content except the one with the id "printarea".
See CSS Design: Going to Print for further explanation and examples.
I tried many of the solutions provided.None of them worked perfectly. They either lose CSS or JavaScript bindings. I found a perfect and easy solution that neither losses CSS nor JavaScript bindings.
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
Javascript:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
I'm very late to this party, but I'd like to pitch in with yet another approach. I wrote a tiny JavaScript module called PrintElements for dynamically printing parts of a webpage.
It works by iterating through selected node elements, and for each node, it traverses up the DOM tree until the BODY element. At each level, including the initial one (which is the to-be-printed node’s level), it attaches a marker class (pe-preserve-print) to the current node. Then attaches another marker class (pe-no-print) to all siblings of the current node, but only if there is no pe-preserve-print class on them. As a third act, it also attaches another class to preserved ancestor elements pe-preserve-ancestor.
A dead-simple supplementary print-only css will hide and show respective elements. Some benefits of this approach is that all styles are preserved, it does not open a new window, there is no need to move around a lot of DOM elements, and generally it is non-invasive with your original document.
See the demo, or read the related article for further details.
I found the solution.
#media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
#page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}
I tried many of the solutions provided.None of them worked perfectly. They either lose CSS or doesn't work in all browsers. I found a perfect and easy solution that neither losses CSS and work perfectly for all browsers.
Html
<div class="row" id="print-div">
Your html
</div>
TYPESCRIPT
let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
.write(`<html>
${printHead}
<body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();
My approach - Simple CSS and JS. Works on React/NextJS too.
const handlePrint = e => {
e.preventDefault();
const bodyElement = document.getElementsByTagName('body')[0];
bodyElement.classList.add('printing');
window.print();
bodyElement.classList.remove('printing');
};
.printing {
visibility:hidden;
}
.printView {
visibility:visible;
}
.printing .printView {
/* You can have any CSS here to make the view better on print */
position:absolute;
top:0;
}
What it does?
Adds .printing class to body element. With CSS we hide all body content with visibility:hidden;
At the same time, we keep CSS ready with .printing .printView to have any kind of view we want for the print area.
Trigger window.print();
Remove .printing class from the body element when the user cancels / prints.
Example:
<button onclick="handlePrint">
Download PDF
</button>
<div>
<h1>Don't print this</h1>
<div class="printView">Print this</div>
</div>
Let me know if this helps anyone :)
Use a special Stylesheet for printing
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
and then add a class i.e. "noprint" to every tag which's content you don't want to print.
In the CSS use
.noprint {
display: none;
}