Print a header for every page in Google Chrome

问题

I'm creating a TV schedule and it shouldn't have any print problems for at least one standard browser.

I need to put logo and title plus table headers on every page, after days of trying and searching I found out that Chrome wouldn't print table headers and position: fixed elements on every page because of this known bug.

Because of the capabilities such as printing background colors with -webkit-print-color-adjust: exact which I've heavily used and changing page borders with CSS @page property, I've customized my view to use Google Chrome, but now that I see it cannot print headers I'm looking for an alternatives which are:

To forget Chrome and start creating print view for another browser which needs to do tweaks to print background colors and change page margins (I'm afraid it's not possible).
To find a CSS/JS solution to make Google chrome to print table headers on every page.

TL; DR: Do you know any jQuery/JavaScript/etc. code to print table headers on every page in Chrome?

回答1:

Yep, that's a Webkit/Chrome thing. It won't print the thead on each page. FF for instance does. What you could do to achieve something like this is use page-break.

Page break does only work on block elements, so you should style your tr's accordingly.

Like this:

tr{
    display:block;
}

Now, you should start copying your thead and put it in at every Xth row with javascript:

var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());

On screen, you don't want all those heads. Remove them with a media query this (for convenience I added a .head class on my th > tr row.:

@media screen {
    tbody .head{
        display: none;
    }
}

Now before each .head make the page break:

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

Check it out overhere: http://jsfiddle.net/jaap/7ZGVv/2/ Keep in mind, jsfiddle doesn't allow you to open just the preview frame, so printing does not work overhere, combine everything in your own file and you'll see the tables will split up, styling is not perfect, and it's not as flexible as your browser itself deciding where to split, but hey, it's something.

回答2:

I have posted a solution here that solves this problem and does not require you to try to preempt the natural page breaks with forced page breaks (a technique which is inherently unreliable and tends to waste paper).

回答3:

This solution won't work exactly for table headers, but it will allow headers of arbitrary html. I've created a library that allows Chrome to print headers and footers, see this answer.

来源：https://stackoverflow.com/questions/15041761/print-a-header-for-every-page-in-google-chrome

标签

css

google-chrome

printing