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
How to Pre-Populate HTML Form Input Fields from Url Parameters
How to Specify Parameters to Google Chrome Adobe PDF Viewer
Why Is a Trailing Punctuation Mark Rendered at The Start with Direction:Rtl
How to Make a Ticking Clock (Time) in Angularjs and HTML
Horizontal Scrolling with Mouse Wheel in a Div
How to Extract Data from HTML Table in Shell Script
HTML5 Flexible Box Model Height Calculation
Items That Span All Columns/Rows Using CSS Grid Layout
CSS Overflow Hidden with Absolute Position
How to Specify Model to a Nginclude Directive in Angularjs
Ckeditor Strips Inline Attributes
Adding Icon to Rails Application