为谷歌浏览器中的每一页打印一个标题

Posted 2023-03-06

【中文标题】为谷歌浏览器中的每一页打印一个标题

【英文标题】：Print a header for every page in Google Chrome

【发布时间】：2013-02-09 02:36:29

【问题描述】：

我正在创建一个电视节目表，它至少对一个标准浏览器应该没有任何打印问题。

我需要在每个页面上放置徽标和标题以及表格标题，经过几天的尝试和搜索，我发现 Chrome 不会因为 known bug 而在每个页面上打印表格标题和 position: fixed 元素。

由于诸如使用我大量使用的 -webkit-print-color-adjust: exact 打印背景颜色和使用 CSS @page 属性更改页面边框等功能，我已经自定义视图以使用 Google Chrome，但现在我看到了无法打印标题我正在寻找替代方案：

忘记 Chrome 并开始为另一个需要调整以打印背景颜色和更改页边距的浏览器创建打印视图（恐怕这是不可能的）。 寻找一种 CSS/JS 解决方案，让 Google chrome 在每个页面上打印表格标题。

TL; DR： 你知道任何 jQuery/javascript/等吗？在 Chrome 中的每个页面上打印表头的代码？

【参考方案1】：

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

分页符仅适用于块元素，因此您应该相应地设置 tr 的样式。

像这样：

tr
    display:block;

现在，你应该开始复制你的thead并用javascript将它放在每X行：

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

在屏幕上，您不想要所有这些头像。使用媒体查询删除它们（为方便起见，我在我的 th > tr 行上添加了一个 .head 类。：

@media screen 
    tbody .head
        display: none;
    

现在在每个 .head 之前进行分页：

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

在这里查看：http://jsfiddle.net/jaap/7ZGVv/2/ 请记住，jsfiddle 不允许您仅打开预览框架，因此无法在此处打印，将所有内容合并到您自己的文件中，您会看到表格会分开，样式不完美，也不是灵活，因为您的浏览器本身决定在哪里拆分，但是，嘿，它的东西。

【讨论】：

感谢您的回答。自从我遇到这个问题以来已经有很长时间了，我通过不使用 Chrome 来解决这个问题。 :D 无论如何，你的回答似乎很有希望，我会尽快试一试。再次感谢。

这似乎确实有效，但这意味着您必须在放置分页符的位置上有些保守。猜测打印时任意 html 元素的垂直高度所涉及的所有变量是不可能的。但是，如果内容的高度非常统一，您可以很好地完成这项工作。

【参考方案2】：

我有 posted a solution here 解决了这个问题，并且不需要您尝试通过强制分页符来抢占自然分页符（这种技术本质上不可靠并且容易浪费纸张）。

【讨论】：

感谢您的回答，我会尽快尝试。

【参考方案3】：

此解决方案不适用于表格标题，但它允许任意 html 的标题。我创建了一个库，允许 Chrome 打印页眉和页脚，请参阅 this answer。