Wednesday, 3 May 2017

Customized web page print using Java Script




Printing a webpage is another important aspect of web development. If you skip this section then when your user will be print a page then it will print as it is, which not good for all case because we add a lot of formatting images on webpage. So all the things on the page will get printed that will be worse.

Customizing web page output is good practice to make a webpage. Because what we see on web page we don’t need to take output on paper same format so customization is mandatory.


Following example will print table as with custom header.


Roll Name City
101 Sona Vns
102 Amit Alld
103 Sumi Alld
104 Rakesh Vns
105 Jyoti alld

HTML Code

<table border="1" cellspacing="0" cellpadding="5" id="tb">
      <tr>
            <th>Roll</th>
            <th>Name</th>
            <th>City</th>
      </tr>
      <tr>
            <td>101</td>
            <td>Sona</td>
            <td>Vns</td>
      </tr>
      <tr>
            <td>102</td>
            <td>Amit</td>
            <td>Alld</td>
      </tr>
      <tr>
            <td>103</td>
            <td>Sumi</td>
            <td>Alld</td>
      </tr>
      <tr>
            <td>104</td>
            <td>Rakesh</td>
            <td>Vns</td>
      </tr>
      <tr>
            <td>105</td>
            <td>Jyoti</td>
            <td>alld</td>
      </tr>
</table><br />
<input type="button" value="Print" onclick="print()" />

Java Script Code 


<script>
      function print()
      {
             var data=document.getElementById("tb")
             pwindow=window.open("");
             pwindow.document.write("<h1 align='center'>Girfa Student Help Print Demo</h1><hr><br>");
             pwindow.document.write("<center>"+data.outerHTML+"</center>");
             pwindow.print();
             pwindow.close();
      }