Problem:
Guys you came across a situation, where you need to print a specific part of a Html or Php Page. When you try to execute this command in javascript :
"window.print();"
It will print your whole page. It gives a lot problem if you do not know how to print the specific content.
For ex - In your Html page , say there is a coupon banner which needs to printed by user. Now How to do that ?
You can do it by 2 ways :
Solution 1)
Using CSS to display only the content which is under print & hiding rest of others.
<style type="text/css" media="print" >
.nonPrintable{display:none;} /*class for the div or any element we do not want to print*/
</style>
==>Here , while you specify ----media="print"---- inside <style> tag, it indicates that , this css will be applied only when you are printing some content.
Solution 2)
The next method that can be commonly applied with most of the browser is using "Javascript".
The idea behind this is :
While you Hit the print command, Just dynamically create a new pop up page from the existing page content(the content you need to print) & then print the page. Very simple.. Just check it out.
<script type="text/javascript"><!--
function print_specific_div_content()
{
//alert("Hello world");
var content = "<html>";
content += document.getElementById("coupon_deal_id").innerHTML ;
content += "</body>";
content += "</html>";
var printWin = window.open('','','left=0,top=0,width=1000,height=500,toolbar=0,scrollbars=0,status =0');
printWin.document.write(content);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
</script>
<body>
<div>Here comes your dummy other content </div>
<div id= "coupon_deal_id">
Only this content you want to print.......
</div>
<button type="button" onclick="print_specific_div_content()" >Print Coupon </button>
</body>
------Just check out the flow-----------------
1) When you click on Print coupon button , the control will go into print_specific_div_content() function.
Then in content variable you are writing entire new html page, there you can add any content or items that you want to display with printed item. For ex - You can add the current Date inside that.
2) After creating a content, just you are creating an instance of window using
var printWin = window.open(.......).
==>Then you are setting some required parameters of window such as Height & width.
==>Then you write the content to that window using printWin.document.write(content);
==>then execute the print command printWin.print();
==>& finally , close the window.
Simple...
Just Rock on .. Use this function where ever you want the function to print the part of the page.
