15

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

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

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

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

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

4

3 回答 3

13

是的，这是一个 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 不允许您仅打开预览框架，因此此处无法打印，请将所有内容合并到您自己的文件中并您会看到表格将被拆分，样式并不完美，并且它不像您的浏览器本身决定拆分位置那样灵活，但是，嘿，这是一些东西。

于 2013-10-03T22:25:37.087 回答
2

我在这里发布了一个解决方案，可以解决这个问题，并且不需要您尝试使用强制分页符来抢占自然分页符（这种技术本质上是不可靠的并且容易浪费纸张）。

于 2014-09-09T18:57:46.137 回答
1

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

于 2015-12-23T23:07:00.353 回答