Question

我正在尝试使用谷歌浏览器进行分页。

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

Answer 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包含更多元素。

Answer 2

实际上，选择接受的答案中缺少一个细节（来自Phil Ross）....

DOES 在Chrome中工作，解决方案真的愚蠢 !!

父控件和要控制分页符的元素都必须声明为：

position: relative

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

这适用于：

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

但是，在Safari中控制分页内部功能不起作用（至少在5.1.7中）

我希望这会有所帮助!!!
PS：下面的问题提出了这样一个事实，即最近版本的Chrome不再尊重这一点，即使是位置：相对;特技。但是，他们似乎确实尊重：

-webkit-region-break-inside: avoid;

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

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

希望这有帮助！

Answer 3

我只想在此注意，Chrome也会忽略已经浮动的div中的page-break- * css设置。

我怀疑在css规范的某个地方有一个合理的理由，但我想有一天它会对某人有所帮助; - ）

另一个注意事项：如果前一个块元素没有明确的高度，IE7无法确认分页设置：

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

Answer 4

我自己也遇到了这个问题 - 我的分页在每个浏览器中都有效，但是Chrome - 并且能够将其分离到表格单元格中的分页符元素。（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

Answer 5

我遇到了与此类似的问题，但我最终找到了解决方案。我将 overflow-x：hidden; 应用于＆lt; html＆gt;标记所以无论我在DOM下面做了什么，它都不会允许分页。通过恢复 overflow-x：visible; ，它运行正常。

希望这有助于那里的人。

Answer 6

打印时要小心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>

Answer 7

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

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

Answer 8

2016年更新：

好吧，当我有

时，我遇到了这个问题

overflow:hidden

在我的div上。

我做完后

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

一切都变得很好和完美

Answer 9

如果您使用带有Bootstrap Css的Chrome，则控制网格布局的类（例如col-xs-12等）使用＆＃34; float：left＆＃34;正如其他人所指出的那样，破坏了分页符。从页面中删除这些以进行打印。它对我有用。（在Chrome版本= 49.0.2623.87）

Answer 10

有这个问题。这么长时间过去...... 如果没有页面的侧面字段，它就会正常，但是当字段出现时，页面和＆＃34;页面中断空格＆＃34;会扩大规模。因此，对于正常字段，在文档中，它显示不正确。我用set

修复它

    width:100%

并使用

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

在第一行使用它。

Answer 11

据我所知，使用谷歌浏览器在表格中获得正确分页符的唯一方法是将其提供给元素<tr>属性 display：inline-table （或显示：inline-block但在其他非表格的情况下更适合。也应该使用属性＆＃34; page-break-after：always; page-break-inside：avoid;＆＃34;由@Phil Ross撰写

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

Answer 12

当我使用padding时，它对我有用：

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

Answer 13

现在是 2021 年，这个主题是搜索 Chrome 的确切问题时的第一个结果。我发现这是一个非常简单的解决方案，它可以工作并且可以在没有任何额外努力的情况下使用，至少会影响 Chrome 页面在中间的中断：

<style>
@media print {
    tr, th, td {
        page-break-inside: avoid !important;
    }
}
</style>

希望这有助于节省时间。

Answer 14

这对我有用（2021 Chrome）：

@media print {
  .page-break {
    display: block;
    break-before: always;
    page-break-before: always;
  }
}

谷歌Chrome打印分页

14 个答案: