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();

      }

</script>

Print Table with Custom Border

var data = document.getElementById("tableId")

data.border = 1;

data.cellSpacing = 0;

data.cellPadding = 2;

data.style.borderCollapse = 'collapse';

pwindow = window.open("");

pwindow.document.write("<h2 align='center'>Invoice List</h2><hr><br><br>");

pwindow.document.write("<center>" + data.outerHTML + </center>");

pwindow.print();

pwindow.close();

Hide last column

$(document).ready(function () {

        $('table tr td:last-child').hide();

        $('table tr th:last-child').hide();

    });

Hide Last Column while printing

function print()

{

           var data = document.getElementById("tb")

           $('table tr td:last-child').hide();

           $('table tr th:last-child').hide();

           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();

           $('table tr td:last-child').hide();

           $('table tr th:last-child').hide();

}

Download HTML File

Next Topic