在Google Chrome中为每个网页打印标题 [英] 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.

我需要放置徽标和标题加表在每个页面上，经过几天的尝试和搜索后，我发现Chrome不会打印表头和 position：fixed 元素在每一页，因为这已知错误。

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.

由于功能例如用打印背景颜色-webkit-print-color-adjust：exact ，我已经大量使用，并改变CSS边框 @page 属性，我已自定义我的视图使用谷歌浏览器，但现在我看到它不能打印标头我正在寻找一个替代品是：

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:

• 要忘记Chrome并开始为另一个浏览器创建打印视图，需要进行调整以打印背景颜色和更改页面边距（我恐怕这是不可能的）。


• 找到一个CSS / JS解决方案，使Google Chrome在每个网页上打印表格标题。

TL; DR：你知道任何jQuery / JavaScript /等等。

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

推荐答案

是的，这是一个Webkit / Chrome的东西。
它不会在每一页上打印thead。 FF例如。
你可以做什么来实现这样的东西使用分页符。

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.

像这样：

tr{
    display:block;
}

现在，您应该开始复制您的thead并放入每第X行与javascript：

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());

在屏幕上，你不想要所有的头。删除它们与媒体查询这（为了方便我添加了一个.head类在我的th> tr行。

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;
    }
}

现在在每个.head之前打开分页符：

Now before each .head make the page break:

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

$ b b

通过覆盖来查看： http://jsfiddle.net/jaap/7ZGVv/2/
请记住，jsfiddle不允许你只打开预览框架，所以打印不工作，结合在自己的文件中的一切，你会看到表将拆分，造型不完美，它的没有你的浏览器本身决定在哪里拆分，但嘿，这是东西。

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.

这篇关于在Google Chrome中为每个网页打印标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！