39

Based on my research, it seems that what I want to do is not possible, but in case something has changed, I wanted to check to see if anyone had come up with a way to do this.

I have a web app that generates reports for print based on user selections in the browser window. I have a custom header and footer that, when the report is printed from the browser, should be repeated on every printed page. It is not the browser header and footer I need, but rather the custom ones that I generate. Also, I don't think this is an issue of CSS and media types, but I am not a CSS expert. I have no issues getting the header and footer to print once, but I can't get them to print on each page. I have read that perhaps if I recreated my report pages using tables, and then used table head tags and CSS, that may work at least to get the header on each page. I have not had success with this yet, but I will try it again if it is the only option. A coworker suggested that I count lines in my php and manually put out the header and footer as required. I guess that is an option, but it just seems like there should be a way to do this that isn't so "brute force"!

The other caveat is that I have to support IE 6, so I suspect some of the CSS things I have tried are just not supported.

If anyone knows any way to do this, that would be great! If there isn't, I will have to rethink my approach.

Thanks in advance!

UPDATE (14 Dec 2011)

I made considerable progress with this issue, and using some of the info from the answers, I did produce reports that were usable, but never as nice or as professional as I wanted. Footers would tend to be not close enough to the bottom of the page, I had to do a lot of guess work and "brittle" calculations about how big text was going to be to decide on inserting page breaks, I could only support a restricted set of page formats, and any changes to the reports resulted in a cascade of code changes and yet more brittle calculations. There was always a scenario that broke some part of some report. We revisted the requirements, and are now generating reports as PDFs using TCPDF. The documentation is a bit opaque, and it takes some experimentation, but the results are far superior and now the reports appear as they should. I would say to anyone trying to do HTML reports from the browser, unless they are very simple, save yourself the frustration (as others told me here) and go with PDFs or something similar.

Carvell Fenton
  • 2,253
  • 6
  • 22
  • 28
  • 3
    Good luck! Printing in browsers is horrible. I once tried to create a sophisticated print stylesheet for ebooks. Actually, Opera displayed it much like I wanted, but all others fail. IE6? Bwa-ha-ha-ha ... *wiping tears out of the corner of my eye*. – Boldewyn Nov 12 '09 at 14:12
  • 1
    I'm with Boldewyn, so many hours messing with formatting reports in browsers, so many tears cried, and computers thrown. I always push really hard for using 3rd party reporting tools like Telerik Reporting or something now, just in hopes I can keep some of my hair a little bit longer. – Greg Andora Nov 12 '09 at 14:19
  • 3
    Thankfully, I already have little hair left, so that is not an issue ;) – Carvell Fenton Nov 12 '09 at 14:35
  • possible duplicate of [HTML Print Header & Footer](http://stackoverflow.com/questions/1360869/html-print-header-footer) – Bergi Mar 25 '13 at 19:14
  • I have posted a Chrome-compatible solution **[here](http://stackoverflow.com/questions/19646835/print-repeating-page-headers-in-chrome/25880258#25880258)** that will add a running header to documents that don't contain overly-large expanses of text. Still no solution for footers, though. – DoctorDestructo Sep 17 '14 at 00:35

4 Answers4

34

It can be done with tables -- and I know I'm going to risk a downvote by suggesting using tables for layout - but we are talking IE6 here which isn't known for its fantastic CSS support :-)

If you set a CSS style as follows:

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

Then when you create your HTML, render your body as:

<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table>
</body>

Yes it's not good (tables vs CSS), it's not ideal, but (importantly for you) it does work on IE6. I can't comment on Firefox as I've not tested it there, but it should do the job. This will also handle differnt sized pages, differing font sizes, etc. so it should "just work".

If you want the header and footer to appear on printed media only, then use the @media parameters to do the right thing:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

Note
As of July 2015, this will still only work in Firefox and IE. Webkit-based browsers (cf. Chrome, Safari) have long standing bugs in their issue trackers about this if anyone feels strongly enough to vote on them:

The comments below this question tell me this is now resolved in Chrome. I haven't checked myself :-)

The original bugs against Chrome (for reference) are:

Chris J
  • 28,355
  • 4
  • 62
  • 105
  • Thanks Chris J. I know that are are not supposed to be using tables these days, but this work around does exactly what I needed, and saves me doing madness like counting lines! Using tables for just this specific purpose in the site might not be "so" bad? :) Thanks again! – Carvell Fenton Nov 16 '09 at 17:32
  • The only problem with this is that tfoot needs to come right after thead (before tbody) ;) – SeanJA Mar 19 '10 at 15:17
  • 1
    Just thought I should say, I've just tried this on Firefox 3 & 4, IE 8, Opera 10, and Safari 5. It works on FF and IE, fails in Safari and Opera. In both FF and IE, it will show it at the bottom of every page, then at the bottom of the text on the last page (if > 1 pages). The others will just show it at the bottom of the text on the last page. – Tarka Dec 06 '10 at 17:13
  • Also fails on Google Chrome. – Alec Jacobson Jul 24 '15 at 19:21
  • it also works in chrome; edit the answer and add chrome –  Apr 15 '18 at 18:38
6

This will work in some browsers, not not all. I don't think there is an elegant cross-browser solution

Include the print footer/header you want in divs on the page (in this example div id='printableFooter')

In the screen css file put:

#printableFooter {display: none;}

In the print css file:

#printableFooter {display: block; position: fixed; bottom: 0;}
UpTheCreek
  • 28,433
  • 31
  • 143
  • 214
5

I would suggest to divide the page in table, and add the header part to first row and the footer part to the last row. The contents of the rows between the first and last rows can be changed dynamically so you will get the constant header and footer at desired pages.

----------
ROW1    HEADER
----------
ROW2   
 Insert dynamic contents here
ROW N-1
----------
ROW N Footer
nickf
  • 499,078
  • 194
  • 614
  • 709
Sachin Chourasiya
  • 18,417
  • 31
  • 80
  • 95
  • 20
    don't mindlessly downvote. it's a viable solution to the problem. – nickf Nov 12 '09 at 15:19
  • I agree about not down voting. This may be my only option if I can get it working in IE 6. I know that a general rule is not to use tables for layout in the modern web world, but this is a special case I think. – Carvell Fenton Nov 12 '09 at 15:27
  • Unfortuantly this won't work if the output paper size is variable -- you need to know the number of rows that a piece of A4 can take. And A3. And Legal. And Letter. And if the font size changes, you need to recalculate the rows again. – Chris J Nov 12 '09 at 15:38
  • I think this could be last solution to your problem, please tell me the reason for downvoting me – Sachin Chourasiya Nov 12 '09 at 16:29
  • 5
    There is no problem in using tables in this case, in fact, tables are for tabulation. – Horacio N. Hdez. Nov 12 '09 at 21:26
  • Thanks Sachin, your answer was helpful too, but I selected Chris J's because his was a little more "complete" and had the CSS I needed too. Thanks for your help! – Carvell Fenton Nov 16 '09 at 17:35
  • @Carvell, Its ok, we are here to help each other :) – Sachin Chourasiya Nov 17 '09 at 05:09
3

try to generate a (rtf | pdf) document for printing

Horacio N. Hdez.
  • 611
  • 5
  • 4
  • I wanted to avoid generating additional document types because once the report is printed, I ideally don't want a file stored anywhere. I guess a temp pdf might be an option, but then it is easier for people to save that document, and I need to avoid that, or at least make it inconvenient to do. – Carvell Fenton Nov 12 '09 at 15:30
  • hi carvell, users can still download the webpage, it you automate with a tmp pdf file the process usability is not really affected, you can provide the html view and for printing the pdf :) – Horacio N. Hdez. Nov 12 '09 at 16:52
  • So for the printing you mean the pdf only exists in the "background" and is not seen by the user? – Carvell Fenton Nov 12 '09 at 17:10
  • yes, just for the printing, you launch a new tab or window with the location of the generated pdf, is the Reader is installed you should get a nice view that has the print option. – Horacio N. Hdez. Nov 12 '09 at 18:23