While working in a web page, we were required to print only one section (say a div content) of a page.
There is a single line Javascript code to do printing:
"window.print();"
However, this function would print the whole page content, which is not what we want.
Solution:-
Example:
<!-- HTML CODE-->
<html><head><title>print</title> </head><body>
<div id="divPrint">
<h1>This is content to print</h1>
</div>
<a onClick="javascript:printDiv()">Print</a>
<div id="notPrint">
<h1>No need to print</h1>
</div>
</body></html>
<!--END HTML CODE-->
<!--javascript code to print perticular div-->
<script>
function printDiv()
{
var divElements = document.getElementById('divPrint').innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML ="<html><head><title>print</title> </head><body>"+divElements+"</body></html>" ;
window.print();
document.body.innerHTML = oldPage;
}
</script>
<!-- END javascript code to print perticular div-->
Explaination:
<a onClick="javascript:printDiv()">Print</a>
when we click on Print link (hyperlink) javascript printDiv function will called and print window will opened.
printDiv() :
Use this function where ever you want the function to print the part of the page.
var divElements:
In this example, divElements, oldPage are variables.
JavaScript variables are containers for storing data values.
getElementById():
The getElementById() method returns the element that has the ID attribute with the specified value.
This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.
Returns null if no elements with the specified ID exists.
innerHTML:
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.
window.print():
Prints the current page.
The print() method prints the contents of the current window.
The print() method opens the Print Dialog Box, which lets the user to select preferred printing options.
There is a single line Javascript code to do printing:
"window.print();"
However, this function would print the whole page content, which is not what we want.
Solution:-
Example:
<!-- HTML CODE-->
<html><head><title>print</title> </head><body>
<div id="divPrint">
<h1>This is content to print</h1>
</div>
<a onClick="javascript:printDiv()">Print</a>
<div id="notPrint">
<h1>No need to print</h1>
</div>
</body></html>
<!--END HTML CODE-->
<!--javascript code to print perticular div-->
<script>
function printDiv()
{
var divElements = document.getElementById('divPrint').innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML ="<html><head><title>print</title> </head><body>"+divElements+"</body></html>" ;
window.print();
document.body.innerHTML = oldPage;
}
</script>
<!-- END javascript code to print perticular div-->
Explaination:
<a onClick="javascript:printDiv()">Print</a>
when we click on Print link (hyperlink) javascript printDiv function will called and print window will opened.
printDiv() :
Use this function where ever you want the function to print the part of the page.
var divElements:
In this example, divElements, oldPage are variables.
JavaScript variables are containers for storing data values.
getElementById():
The getElementById() method returns the element that has the ID attribute with the specified value.
This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.
Returns null if no elements with the specified ID exists.
innerHTML:
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.
window.print():
Prints the current page.
The print() method prints the contents of the current window.
The print() method opens the Print Dialog Box, which lets the user to select preferred printing options.
this code does same task, just new window will open for print.
ReplyDeletevar prtContent = document.getElementById('divPrint');
var WinPrint = window.open('Print Attedance Report', 'Print Attedance Report', 'letf=100,top=100,width=600,height=600');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
Thank's this code helps me a lot, thank you very much, i couldn't found it any where, it really helps me...:-)
ReplyDeleteAlways Welcome...!!!! Thanks for your Great Feedback...!!! Stay in touch with Technology Park....!!!
ReplyDelete