为Google Chrome中的每个页面打印标题

Question

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

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

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

TL; DR:你知道任何jQuery/JavaScript /等.用于在Chrome中的每个页面上打印表格标题的代码？

Answer 1

是的,这是一个Webkit/Chrome的东西.它不会在每页上打印thead.例如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不允许你只打开预览框架,所以打印不能在一起工作,将所有内容组合在你自己的文件中你会看到桌子会分开,造型并不完美,而且它不像浏览器本身决定分割的那样灵活,但是嘿,这就是它.

这看起来确实有效,但这意味着你必须在你放置分页符的地方保守一点.在打印时猜测任意HTML元素的垂直高度中涉及的所有变量是不可能的.但如果内容的高度非常均匀,那么你可以很好地完成这项工作. (4认同)