Google Chrome浏览器打印分页符

我试图让谷歌浏览器做分页。

我已经通过一堆网站告诉他们page-break-after: always; 是有效的铬,但我似乎无法让它工作,即使是一个非常简单的例子。 在Chrome中打印时,有没有办法强制分页?

我已经在所有主stream浏览器(包括Chrome)中成功地使用了以下方法:

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Paginated HTML</title> <style type="text/css" media="print"> div.page { page-break-after: always; page-break-inside: avoid; } </style> </head> <body> <div class="page"> <h1>This is Page 1</h1> </div> <div class="page"> <h1>This is Page 2</h1> </div> <div class="page"> <h1>This is Page 3</h1> </div> </body> </html> 

这是一个简单的例子。 在真实的代码中,每个页面div都包含更多的元素。

其实一个细节是从select被接受的答案(从菲尔罗斯)错过….

它在Chrome中工作,解决scheme真的很傻

父级和要控制分页的元素都必须声明为:

 position: relative 

看看这个小提琴: http : //jsfiddle.net/petersphilo/QCvA5/5/show/

这是对的:

 page-break-before page-break-after page-break-inside 

但是,在Safari中控制分页符不起作用(至less在5.1.7中)

我希望这有帮助!!!

PS:下面的问题提出了一个事实,即最近版本的Chrome不再尊重这一点,即使是相对的位置: 招。 但是,他们似乎确实尊重:

 -webkit-region-break-inside: avoid; 

看这个小提琴: http : //jsfiddle.net/petersphilo/QCvA5/23/show

所以我想我们现在必须添加…

希望这可以帮助!

我自己也遇到了这个问题 – 我的页面在除Chrome以外的每个浏览器中都能正常工作,并能够将其隔离到表格单元格内的页面中断元素。 (CMS中旧的,inheritance的模板)

显然,Chrome并没有遵守表格单元格内的页面中断前或页面中断后的属性,所以这个Phil示例的修改版本将第二和第三个标题放在同一页面上:

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Paginated HTML</title> <style type="text/css" media="print"> div.page { page-break-after: always; page-break-inside: avoid; } </style> </head> <body> <div class="page"> <h1>This is Page 1</h1> </div> <table> <tr> <td> <div class="page"> <h1>This is Page 2</h1> </div> <div class="page"> <h1>This is, sadly, still Page 2</h1> </div> </td> </tr> </table> </body> </html> 

根据CSS规范,Chrome的实现(可疑地)是允许的 – 您可以在这里看到更多: http : //www.google.com/support/forum/p/Chrome/thread?tid= 32f9d9629d6f6789& hl= zh-CN

我只是想在这里注意到,Chrome也忽略了已经浮动的div中的page-break- * css设置。

我怀疑在css规范的某个地方有一个合理的理由,但是我觉得有一天它可能会帮助别人;-)

只是另一个注意:IE7不能确认分页设置没有明确的高度在前面的块元素:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

我有一个类似的问题,但我最终find了解决scheme。 我有overflow-x:hidden; 应用于<html>标签,所以不pipe我在DOM中做了什么,它绝不允许分页符。 通过恢复到溢出x:可见; 它工作正常。

希望这可以帮助那里的人。

谨防CSS:在打印时display:inline-block

如果我的表格在带有样式display:inline-block的div内,那么Chrome和Firefox的CCS属性都无法在我的下一页工作display:inline-block

例如,以下不起作用:

 <div style='display:inline-block'> <table style='page-break-before:always'> ... </table> <table style='page-break-before:always'> ... </table> </div> 

但以下工作:

 <div> <table style='page-break-before:always'> ... </table> <table style='page-break-before:always'> ... </table> </div> 

我之前在Chrome上面对过这个问题,其原因是有一个div将min-height设置为一个值。 解决方法是在打印时重置最小高度,如下所示:

 @media print { .wizard-content{ min-height: 0; } } 

2016更新:

那么,我有这个问题,

 overflow:hidden 

在我的分区。

我做完之后

 @media print { div { overflow:initial !important } } 

一切都变得美好而完美

看来,这是相对最近(2014年2月)讨论(在一个旧的2005错误票)在webkit错误跟踪器

https://bugs.webkit.org/show_bug.cgi?id=5097

如果你使用Chrome和Bootstrap Css,控制网格布局的类如col-xs-12等使用“float:left”,正如其他人指出的那样,破坏了分页符。 从您的页面中删除这些打印。 它为我工作。 (在Chrome版本= 49.0.2623.87)

有这个问题。 很长一段时间通过…没有页面的侧面是正常的,但是当字段出现时,页面和“分页符空间”将会缩放。 所以,在一个正常的领域,在一个文件,它显示不正确。 我用set来修复它

  width:100% 

并使用

 div.page { page-break-before: always; page-break-inside: avoid; } 

在第一行使用它。

据我所知,唯一能让Google Chrome浏览器获得正确分页符的方法就是将元素<tr>赋予属性display:inline-table (或display:inline-block),但在其他情况下不是表格)。 也应该使用属性“页面中断:总是;页面中断内部:避免;” 如@Phil Ross写的

 <table> <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;"> <td></td> <td></td> ... </tr> </table> 

当我使用填充时,它正在为我工​​作:

 <div style="padding-top :200px;page-break-inside:avoid;"> <div>My content</div> </div>