Computer Revolution (www.comrevo.com): How to add footer into a print of a webpage

Friday 12 February 2016

How to add footer into a print of a webpage

   In this post, we will see how to add footer to a print of a webpage. This footer will not be visible on browser webpage but will be present in a print.

               Go through the following program. Here I have added footer "P:S-CTL-UG/02/R0" into the print.



Program Code:

<html>

<head>

<style type="text/css">
    @media screen
    {
        div.divFooter
        {
            display: none;
        }
    }
    @media print
    {
        div.divFooter
        {
            position: fixed;
            bottom: 0;
        }

        div.willnotbeshowninprint
        {
            display: none;
        }
    }
</style>

<div class="divFooter">P:S-CTL-UG/02/R0</div>

</head>

<body>

<font size=6><b>
This is Sample Webpage
</b></font>

<br />
<br />
<br />

<div class="willnotbeshowninprint">
<font size=6><b>
This will not be shown in Print Page
</b></font>
</div>

<br />
<br />
<br />

<div class="willnotbeshowninprint">
<a href="#" onclick="javascript:window.print();">Print this page</a>
</div>

</body>
</html>

Output:

On a Browser: