Google Chrome 打印分页符
Posted
技术标签:
【中文标题】Google Chrome 打印分页符【英文标题】：Google Chrome Printing Page Breaks 【发布时间】：2010-12-10 11:46:25 【问题描述】：我正在尝试让谷歌浏览器进行分页。
我通过一堆网站被告知 page-break-after: always; 在 chrome 中是有效的，但即使是一个非常简单的例子，我似乎也无法让它工作。用chrome打印时有什么办法强制分页吗？
【问题讨论】：
这似乎是最近（2014 年 2 月）在 webkit 错误跟踪器 bugs.webkit.org/show_bug.cgi?id=5097 上讨论的（在 2005 年的旧错误票上）@ 【参考方案1】：我已经在包括 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 包含更多的元素。
【讨论】：
啊，我明白我的问题了。我试图将它与 标签 一起使用 @Mike 感谢您为我解答问题。不知道为什么 br 不起作用而 div 起作用，但仍然很容易改变。 这在您尝试与父页面一起使用时有效，但在您从 iframe 打印时无效（当然是在 chrome 中）。 根据规范break-after 和 break-before 仅适用于 block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - 这意味着没有浮动或任何花哨的定位技巧。
容器使用display:flex是不行的【参考方案2】：
我自己也遇到了这个问题 - 我的分页符在除 Chrome 之外的所有浏览器中都有效 - 并且能够将其隔离到位于表格单元格内的 page-break-after 元素。 （CMS 中旧的、继承的模板。）
显然，Chrome 不支持表格单元格内的 page-break-before 或 page-break-after 属性，因此这个 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=en
【讨论】：
这是我的问题 - SharePoint 2007 强制使用表格单元格进行布局，因此 Chrome 遵守任何打印样式表布局声明:(【参考方案3】：我只想在这里指出，Chrome 也会忽略已浮动的 div 中的 page-break-* css 设置。
我怀疑在 css 规范中的某个地方对此有充分的理由，但我认为它可能会在某天对某人有所帮助 ;-)
还有一点需要注意：如果前一个块元素没有明确的高度，IE7 无法确认分页符设置：
http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/
【讨论】：
可能是因为浮动元素将其从文档流中取出，其方式与绝对定位它的方式相同。具有 position:absolute 的元素不适用于 page-break-*。 另外：在具有分页符样式的元素的所有父元素中不应有任何浮动或绝对定位元素。我有引导“col-xs-12”父级，当我明确设置“float：none”时，分页符开始起作用！【参考方案4】：我遇到了类似的问题，但我最终找到了解决方案。我将 overflow-x: hidden; 应用于 标记，因此无论我在 DOM 下面做什么，它都不会允许分页符。通过恢复到 overflow-x: visible; 效果很好。
希望这对那里的人有所帮助。
【讨论】：
请注意，任何具有某些溢出属性的父元素都可能导致此问题。我刚刚添加了规则* overflow-x: visible 。【参考方案5】：
实际上，被选为接受的答案中缺少一个细节（来自 Phil Ross）....
它确实在 Chrome 中工作，而且解决方案真的是愚蠢！！
要控制分页的父元素和元素都必须声明为：
position: relative
看看这个小提琴： http://jsfiddle.net/petersphilo/QCvA5/5/show/
这适用于：
page-break-before
page-break-after
page-break-inside
但是，在 Safari 中控制 page-break-inside 不起作用（至少在 5.1.7 中）
希望对你有帮助！！！
PS：下面的问题提出了这样一个事实，即最新版本的 Chrome 不再尊重这一点，即使是 position: relative;诡计。 但是，他们似乎确实尊重：
-webkit-region-break-inside: avoid;
看到这个小提琴： http://jsfiddle.net/petersphilo/QCvA5/23/show
所以我想我们现在必须添加它...
希望这会有所帮助！
【讨论】：
这取决于所使用的 WebKit 版本是否可以在 Chrome 中运行。你自己说它在 Safari 5.1.7 中不起作用，所以我认为它一点也不傻。他们测试的 WK 版本可能与您测试的不同。 该页面在 Chrome 26.0.1410.65 中不起作用，我得到 3 页，最后一页只有一个字）。我还尝试确保要应用规则的元素及其父元素在我自己的页面上都有 position:relative ，但在打印时它仍然不会添加分页符。那么这是 Chrome 中来来去去的功能吗？ 你是对的......它似乎在最近版本的 chrome 中不起作用；但是，您可以将其替换为：-webkit-region-break-inside：避免； （看这个：jsfiddle.net/QCvA5/22/show） @Peter 这里有更新吗？ I posted an SO question 赏金试图解决我使用page-break-inside 的情况。有什么帮助吗？
这对我来说有一个奇怪的地方——它只有在我将样式内联而不是单独的 css 文件时才有效。我在 h7 元素上使用它。 Chrome 版本为 38.0.2125.111 m。 <h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>【参考方案6】：
有这个问题。这么久过去了... 没有页面的边栏是正常的，但是当字段出现时，页面和“分页空间”会缩放。因此，对于文档中的正常字段，它显示不正确。 我用 set 修复它
width:100%
并使用
div.page
page-break-before: always;
page-break-inside: avoid;
在第一行使用它。
【讨论】：
【参考方案7】：打印时注意 CSS：display:inline-block。
如果我的表格位于样式为 display:inline-block 的 div 中，则转到下一页的 CCS 属性在 Chrome 和 Firefox 中都不适合我
例如，以下行不通：
<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>
【讨论】：
还有“浮动”。父元素中不应有任何“浮动”属性。 同display: flex【参考方案8】：
我之前在 chrome 上遇到过这个问题，原因是有一个 div 将 min-height 设置为一个值。 解决方案是在打印时重置最小高度，如下所示：
@media print
.wizard-content
min-height: 0;
【讨论】：
【参考方案9】：据我所知，使用谷歌浏览器在表格中获得正确分页符的唯一方法是将其赋予元素 <tr> 属性 display: inline-table （或 display: inline -block 但它更适合其他不是表格的情况）。还应该使用属性“page-break-after：always；page-break-inside：避免；”正如@Phil Ross 所写
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
【讨论】：
有什么提示可以不破坏 tds 内的边距/填充？ @joeforker 你应该使用2016 年更新：
好吧，我遇到了这个问题，当我遇到
overflow:hidden
在我的 div 上。
我做了之后
@media print
div
overflow:initial !important
一切都变得美好而完美
【讨论】：
这解决了没有别的办法的问题。谢谢！ 这是一个要记住的正确选项！内容可能只是被隐藏了。【参考方案11】：如果您将 Chrome 与 Bootstrap Css 一起使用，则控制网格布局的类（例如 col-xs-12 等）使用“float：left”，正如其他人所指出的那样，它会破坏分页符。从您的页面中删除这些以进行打印。它对我有用。 （在 Chrome 版本上 = 49.0.2623.87）
【讨论】：
【参考方案12】：当我使用以下填充时，它对我有用：
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>
【讨论】：
这只是因为填充而不是因为分页符而起作用【参考方案13】：现在是 2021 年，这个主题是搜索 Chrome 的确切问题时的第一个结果。我发现这是一个非常简单的解决方案，它可以工作并且无需任何额外的努力就可以打到你的身上，至少会影响 Chrome 页面在中间的中断：
<style>
@media print
tr, th, td
page-break-inside: avoid !important;
</style>
希望这有助于节省时间。
【讨论】：
【参考方案14】：这对我有用（2021 Chrome）：
@media print
.page-break
display: block;
break-before: always;
page-break-before: always;
【讨论】：
以上是关于Google Chrome 打印分页符的主要内容，如果未能解决你的问题，请参考以下文章
Chrome (v51) - 用于在表格行之间插入分页符的媒体查询 - 仅限横向
将“分页符”添加到 Google 表格或动态 x 行数的公式