How to print part of a webpage (header) on each printed page in Chrome

Question

I am working on a invoice printing script. The invoice number has to be printed in the top of all the printed pages. Iam using php to achieve this. But here iam just copying the html version. This script is working fine in FF and IE but not working in chrome. In FF i could see the Invoice number appearing in the header part of all pages in print view. I have deleted all unnecessary codes to have a clear code. I need to see the "Invoice Number : A23000BN " in each printed page. Is there any way i achieve the same in chrome browser? My html script is below:

<html>
<head>
<style>
#header {
    text-align: right;
    height: 20px;
    position: fixed;
    margin: 0px;
    bottom: 0px;
}
</style>
</head>
<body>
<table width="100%">
   <tr>
      <td height="1200"></td>
   </tr>
</table>
<div class="header"> Invoice Number : A23000BN </div>
</body>
</html>

In your style code #header point to an ID . Change this to .header to point it to your header class. — , Dec 31 '15 at 06:43
it works fine when you run the html. Please go to print preview in Chrome. The header is not repeating. I could see only the invoice number print once in the first page. — Sanju Menon, Dec 31 '15 at 06:50
similar question http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page — , Dec 31 '15 at 07:38
i saw that solution. But that solution is limited to if you know after many records u need to have a break. But my page is dynamic. i doesnt know when i need a break. Anyways thank you for your time. — Sanju Menon, Dec 31 '15 at 08:36

user1496463 · Answer 1 · 2015-12-31T07:46:29.580

0

Something like this ? https://jsfiddle.net/1xnnnp4b/2/

Hit Ctrl+P to get the content in the print preview (will not be visible in the screen version)

.header {
  display: none;
}

@media print {
  .header {
    display: block;
    position: fixed;
  }
}

<div class="header">
  Invoice Number : A23000BN
</div>
<table width="100%">
  <tr>
    <td height="1500">sameple content
    </td>
  </tr>
</table>

Edit: I think this should do it. You will need to copy the changes to your page and then try it. It wont work properly in jsfiddle as the parent regions has oveflow

edited Dec 31 '15 at 07:46

answered Dec 31 '15 at 07:05

user1496463

410
3
14

Let me try to explain the scenario. My invoice report usually comes to 2 to 3 pages with the data coming from the database. In the print, all the pages i need to show the Invoice Number. Not in just the 1st page or last page. if you can increase the you can see 2 pages, but in the second page you cant see the Invoice Number. Hope you got my point? – Sanju Menon Dec 31 '15 at 07:25
Yes i copied to my page and checked it... i checked in Chrome, it was not working. Can u pls check in chrome. Iam really stuck with this. – Sanju Menon Dec 31 '15 at 08:41

score 0 · Answer 2 · answered Dec 31 '15 at 07:07

0

Because of the high TD element, the serial number is shown on the bottom of the second page: https://jsfiddle.net/m665svj6/

I can also see it in the print preview...

If you want it to be shown at the top of the page change bottom: 0px; to top: 0px; like here: https://jsfiddle.net/m665svj6/1/

answered Dec 31 '15 at 07:07

Technotronic

8,424
4
40
53

i just gave the td element more because i want to show the results in more than one page. How many ever pages, i need to show the Invoice number in the top of all the printed pages. – Sanju Menon Dec 31 '15 at 07:26

How to print part of a webpage (header) on each printed page in Chrome

2 Answers2