Google Chrome打印分页符

110

我正在尝试让Google Chrome浏览器执行分页符。

通过一堆page-break-after: always;在chrome中有效的网站已经告诉我，但即使有一个非常简单的示例，我似乎也无法使其正常工作。在使用chrome打印时，有什么方法可以强制分页？

css  printing  google-chrome 
— 迈克·瓦尔斯塔
source
看来，这是相对较新的（2014年2月）（在2005年的旧版故障单上）在webkit错误跟踪器上进行了讨论bugs.webkit.org/show_bug.cgi?id=5097
— Alex KeySmith 2014年

Answers:

134

我在包括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包含更多元素。

— 菲尔·罗斯
source
4
啊，我明白了我的想法。我试图将其与<br/>标签一起使用
— Mike Valstar，09年
@Mike感谢您为我回答问题。不知道为什么br不起作用而div不能起作用，但是仍然很容易改变。
— 杰夫·戴维斯
当您尝试与父页面一起使用时，此方法有效，但从iframe（当然，在chrome中）打印时，此方法无效。
— VJ
另请阅读下面的@peter答案；他也有一个很好的观点position: relative。
— doub1ejack
6
根据规范break-after，break-before仅适用于block-level elements, table row groups, table rows (but see prose)：drafts.c​​sswg.org/css-break-3/#break-between –表示没有浮标或任何奇特的定位技巧。
— Mikko Rantalainen
34

实际上，被选择为接受的答案（来自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的最新版本也不再尊重这一点：招。但是，他们似乎确实尊重：

-webkit-region-break-inside: avoid;

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

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

希望这可以帮助！

— 彼得
source
它取决于所使用的WebKit的版本（在Chrome中是否可以运行）。您自己说过，它在Safari 5.1.7中不起作用，所以我认为这根本不是愚蠢的。他们测试的WK版本可能与您测试的版本不同。
— 乔尔·佩尔顿
该页面在Chrome 26.0.1410.65中不起作用，我得到3个页面，最后一个页面只有一个单词）。我还尝试确保要对其应用规则的元素及其父元素在我自己的页面上都具有position：relative，但在打印时仍不会添加分页符。那么，这是Chrome附带的功能吗？
— 2013年
您是对的...。在最新版的chrome中似乎无法使用；但是，您可以将其替换为：-webkit-region-break-inside：避免; （请参阅此文件：jsfiddle.net/QCvA5/22/show）
— 彼得
@Peter这里有更新吗？我悬赏地提出了一个SO问题，试图解决我使用的问题page-break-inside。有什么帮助吗？
— Zach Saucier
1
这对我来说有点奇怪-仅当我将样式内联而不是放在单独的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>
— 加文·辛普森
16

我在这里只想指出，Chrome也忽略了已浮动的div中的page-break- * css设置。

我怀疑在CSS规范的某处对此有合理的理由，但我认为有一天可能会帮助某人；-)

还要注意一点：IE7在没有上一个block元素的显式高度的情况下无法确认分页符设置：

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

— 福达雷
source
2
可能是因为浮动元素以与绝对定位相同的方式将其从文档流中移出。具有position：absolute的元素不适用于page-break- *。
— 2013年
1
另外：在具有分页符样式的元素的所有父元素中，不应有任何浮动或绝对定位的元素。我有一个引导程序“ col-xs-12”父级，当我为它明确设置“ float：none”时，分页符开始起作用！
— Stalinko
12

我遇到了与此类似的问题，但最终找到了解决方案。我有溢出-x：隐藏；应用于<html>标记，因此无论我在DOM中进行以下操作如何，它都决不允许分页符。通过恢复为溢出-x：可见；可见。工作正常。

希望这可以帮助某人。

— 大卫·比汉
source
请注意，任何具有某些溢出属性的父元素都可能导致此问题。我刚刚添加了规则* { overflow-x: visible }。
— 加勒特
10

我自己遇到了这个问题-我的页面在除Chrome之外的所有浏览器中都无法正常工作-并能够将其隔离到表格单元格内的page-break-after元素。（CMS中的旧继承模板。）

显然，Chrome不支持表格单元格中的page-before-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= zh-CN

— 内特·库克
source
这是我的问题-由SharePoint 2007强制使用表格单元进行布局，因此Chrome遵循所有打印样式表的布局声明：(
— Dexter 2012年
8

注意CSS：display:inline-block打印时。

如果我的表格位于具有以下样式的div内，那么下一个CCS属性都无法在Chrome和Firefox中运行： 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>
— 古德拉丹
source
1
而且“浮空”也是如此。父元素中不应有任何“浮动”属性。
— Jimba Tamang 2015年
2
与display: flex
— -Michael Schmid
4

我以前在chrome上遇到过这个问题，其原因是有一个div的min-height设置为一个值。解决方法是在打印时重置最小高度，如下所示：

@media print {
    .wizard-content{
        min-height: 0;
    }
}
— 哈米·艾哈迈德
source
3

2016年更新：

好吧，当我有 

overflow:hidden

在我的div上

我做了之后

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

一切都变得完美而完美

— x0 z1
source
1
当没有其他操作时，这解决了问题。谢谢！
— bstory，2016年
1

如果您将Chrome与Bootstrap Css结合使用，则控制网格布局的类（例如col-xs-12等）将使用“ float：left”，正如其他人指出的那样，它会破坏分页符。从页面中删除这些以进行打印。它为我工作。（在Chrome版本上为49.0.2623.87）

— 阿斯特拉熊
source
0

有这个问题。这么长的时间过去了...没有页面的副域，它可以正常中断，但是当出现字段时，页面和“分页空间”将会缩放。因此，在文档中的正常字段中，该字段显示为不正确。用安排修理

    width:100%

和使用 

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

在第一行使用它。

— 积分
source
0

据我所知，使用Google Chrome在表格中获取正确分页符的唯一方法是将其赋予元素<tr>属性display：inline-table（或display：inline-block，但在其他非表格情况下更适合） ）。还应使用属性“ page-break-after：始终； 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>
— 牛皮纸
source
1
有什么暗示不破坏tds内的边距/填充吗？
— joeforker '16
@joeforker，应将<tr>与“ padding：0; margin：0;”一起使用 并将边距属性赋予其中的元素。
— Codekraft
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.