Monday, August 9, 2010

Printing Web page

Using javascript methods you can print the webpage contents or portion of webpage for your likes

 calling window.print() method invoke the browser's print dialog.

By setting appropriate styles in css classes you can hide/show particular parts of the display from printing.

To enable it include print.css only on printing time, for this you have to set media to "print"
so the particular css  stylesheet invoked only while printing

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

setting media as screen sets the display for browser


sample print.css content

 div { display: none; }  
 #yourdiv { display: block; }  


update :
 @media print {  
   div.header {  
     display: none;  
   }  
   div.printable {  
     page-break-inside: avoid;  
     page-break-after: always;  
   }  
  }  

This will hide the div content those are not need to be printed.
page-break-inside: avoid; page-break-after: always; are the two properties allign print content in a manner.

No comments:

Post a Comment