How to Print a Portion of an HTML Page

Print specific part of webpage

You can use simple JavaScript to print a specific div from a page.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

How to print a portion of an HTML page?

You should use a separate css for the print media. This allows you to hide/show portions of the page when it gets printed.

html :

<div class="dont-print-that">
blah
</div>
print this!

include:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

print.css

.dont-print-that{display:none;}

The other solution is to open a new window with only the content you want to print. You could either do that in a popup or an iframe. Personally I find the CSS solution more elegant, but that's up to you.

How do I print part of a rendered HTML page in JavaScript?

I would go about it somewhat like this:

<html>
<head>
<title>Print Test Page</title>
<script>
printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
</script>
</head>

<body>
<h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
<b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br>
<div id="div1">This is the div1's print output</div>
<br><br>
<b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
<div id="div2">This is the div2's print output</div>
<br><br>
<b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>
</html>

How to print selected portion of HTML page?

Basically the problem is that your printContent function is designed in such way that it works only with a single element.

You can alter your function, so it will accept not the id of the element but the css class name as in the following sample

function printContent(className) {
var matchedElements = document.getElementsByClassName(className);
var str = '';

for (var i = 0; i < matchedElements.length; i++) {
var str = str + matchedElements[i].innerHTML;
}

var newwin = window.open('', 'printwin', 'left=100,top=100,width=400,height=400');

newwin.document.write('<HTML>\n<HEAD>\n');
newwin.document.write('<TITLE>Report</TITLE>\n');
newwin.document.write('<script>\n');
newwin.document.write('function chkstate(){\n');
newwin.document.write('if(document.readyState=="complete"){\n');
newwin.document.write('window.close()\n');
newwin.document.write('}\n');
newwin.document.write('else{\n');
newwin.document.write('setTimeout("chkstate()",2000)\n');
newwin.document.write('}\n');
newwin.document.write('}\n');
newwin.document.write('function print_win(){\n');
newwin.document.write('window.print();\n');
newwin.document.write('chkstate();\n');
newwin.document.write('}\n');
newwin.document.write('<\/script>\n');
newwin.document.write('</HEAD>\n');
newwin.document.write('<BODY onload="print_win()">\n');
newwin.document.write(str);
newwin.document.write('</BODY>\n');
newwin.document.write('</HTML>\n');
newwin.document.close();
}

You'll also need to alter html a bit

<html>
<body>
<div class="print_thistag">
<p>Hello</p>
</div>
<div class="print_thistag">
<p>User</p>
</div>
<input type="submit" value="Print Report" onclick="printContent('print_thistag');">
</body>
</html>

It will work as you expected - aggregate every div content into a single html string which will be printed.

By the way assigning the same id for the multiple elements is not a good practice - the id should be unique and if you want to group elements somehow - you can just add the same class for those elements as in the sample above.

How to print a part from a page?

Wrap your print_f4 in a div with class called "hide-from-print" and use the following CSS:

//CSS

@media print {
.hide-from-print {
display: none !important;
}
}

Print the contents of a DIV

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;
}

Limit print area to a div

You will have to put all other content into html elements (note the p tag)

<body>
<p>This should NOT be shown in Print Preview</p>
<div id="main">
<p>This should NOT be shown in Print Preview</p>
<div id="printarea">ONLY this should be shown in Print Preview</div>
</div>
</body>

Then you can hide all other elements below a parent. do this for each parent in the hierarchy

@media print {
body *, #main * { display:none; }
#main, #main #printarea, #main #printarea * { display:block; }
}

EDIT:

this is very similar to the second answer to printing only one div

How to print only parts of a page?

IE supports onbeforeprint and onafterprint, but what you really want is a print stylesheet.

<link rel="stylesheet" type="text/css" media="print" href="print.css">

See also: this answer

Print div id=printarea/div only?

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.



Related Topics



Leave a reply



Submit