Community discussion forum

Header and Footer in Web page print

• • Reply

  2 years ago

  by mmharinath

  M M Harinath

  Chennai, India

  Joined 3 years ago

  Hi All,

  while taking web page print out, I have to print customized header and footer.

  Can anybody help me to do this?

   

  Thanks in advance

  Report abuse
• • Reply

  2 years ago

  by vikash.singh24

  vikash kumar singh

  , India

  Joined 2 years ago

  You can do this through the following code

  <P>PAGE HEADER</P>
  <P>Hello This is the first page</P>
  

  <P>PAGE FOOTER</P>
  
  <P style="page-break-before:always"></P>
  
  

  <P>PAGE HEADER</P>
  <P>Hello This is the second page</P>
  

  <P>PAGE FOOTER</P>
  
  
  
  

  There might by better way!!...but this can work also

  Report abuse
• • Reply

  2 years ago

  by mmharinath

  M M Harinath

  Chennai, India

  Joined 3 years ago

  Hi,

  Thanks for your reply. but i want to set header and footer dynamically using mso attributes

  Report abuse
• • Reply

  2 years ago

  by freakinawesome44

  Jonathan Weber

  , United States

  Joined 2 years ago

  Are you saying you want to dynamically add a header and a footer when someone prints the page? If so you can use the following css code, where the "header" and "footer" divs are invisible unless the page is being printed:

  <style type="text/css">#header {visibility: hidden;}

  #footer{visibility: hidden;}

  @media print {
      #header, #footer {visibility: visible;}
    }
  
  

  </style>
  
  

  <div id="header">Header Data Goes Here</div>

  <div id="footer">Footer Data Goes Here</div>

   

  If you want to add the header/footer dynamically after the page has loaded so it is visible onscreen try using the JavaScript innerHTML() method.

  Hope I could be of any help!

  Report abuse
• • Reply

  11 months ago

  by fhajaj

  Fadi Hajaj

  Houston, United States

  Joined 11 months ago
  Hi Is there a way through CSS to use different headers between the first page and the rest when printing multiple pages. We can use the attribute display:table-header-group; in the for example to print the same thead on all pages. But can we print different headers? Example: First page: header1 body Second Page: header2 body Third Page: header2 body . . . Any help is very much appreciated. Thanks!
  Report abuse
• • Reply

  5 months ago

  by janebush08

  jane bush

  , United States

  Joined 1 year ago

  Thanks for the solution freakinawesome44... found very useful to me...

  net software development

  Report abuse