4

我正在尝试在 HTML 页面中打印一个用 jQuery 生成的大表。我正在使用 Chrome 26.0.141。问题在于分页符。

我最初使用这个 css

#membersList table { page-break-inside:auto; position:relative}
#membersList tr { page-break-before:avoid; page-break-after:auto;position:relative}
#membersList td{ border:solid 1px #CCCCCC;width:auto;position:relative}
#membersList thead { display:table-header-group;position:relative }
#membersList tfoot { display:table-footer-group;positioion:relative}

这个功能有效，所以我搜索并获得了这个链接 Google Chrome Printing Page Breaks

基于该链接中的答案之一，我正在使用以下 CSS 属性

 -webkit-region-break-inside: avoid;

但是当我运行并检查元素时，默认情况下它会被删除。

解决方案是什么？我搜索了很多帖子。他们说最新版本不支持分页符。如果这是真的，那么还有什么其他解决方案可以在 Google Chrome 中实现分页？

4

5 回答 5

13

最后我解决了这个问题。我做了tr{display:block;} ，然后我固定了单元格间距。

分页符仅适用于块级元素。

于 2013-07-24T05:48:17.987 回答
2

您可能需要将表格分成几个部分，并将它们的page-break-aftercss 属性设置为always. 这有效（使用 beta Chrome），我不知道是否有办法在连续表中做到这一点。

于 2013-07-20T11:15:54.290 回答
2

正如MDN上所说：

WebKit 浏览器不支持该属性；但有些具有非标准的 -webkit-column-break-after 和 -webkit-region-break-after，其参数与 page-break-after 相似。

所以你需要使用page-break-after一些最适合你的价值。这里是其中的一些：

page-break-after CSS 属性在当前元素之后调整分页符。

自动： 初始值。自动分页符（既不强制也不禁止）。

always： 总是在元素之后强制分页。

避免： 避免元素后的分页符。

left： 在元素之后强制分页，以便将下一页格式化为左页。

right： 在元素之后强制分页，以便将下一页格式化为右页。

您还可以使用该break-after属性：

break-after CSS 属性描述了页面、列或区域在生成框后如何中断行为。如果没有生成框，则忽略该属性。

于 2013-07-20T11:21:37.490 回答
1

我已经为 qt 提供了一些补丁来改进表格分页符。您可能希望查看问题 168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13

于 2013-07-20T11:39:08.950 回答
0

正如@sabof 提到的那样，我已经使用了几张桌子来完成这件事。假设我想要 11 行应该出现在页面上。

<table>
   11 * <tr></tr>
</table>
<table>
   11 * <tr></tr>
</table>

HTML 标记；

<div id="printSection">
    <div>

    </div>
</div>

我动态创建了行，因此 JQuery 逻辑如下； 

var j = 23;

for (var i = 0; i < j; i++) {

    if (i != 0 && i % 11 == 0) {

         $("#printSection div").append("<table><tbody></tbody></table>");              
   }              

   var node = "<tr><td>Your Data</td></tr>";
   $("#printSection tbody").last().append(node);
   }
}

CSS 是这样的；

#printSection table {            
        page-break-after: always;
        page-break-inside: avoid;
        break-inside: avoid;
    }
于 2016-02-11T21:03:35.547 回答