Question

我在打印过程中在Google Chrome中遇到page-break-after问题。它似乎无法正常工作。我试过Firefox，它就可以了。我的代码是：

<div style="position: relative; display: block;">

    <div style="display: block; page-break-after: always; position: relative;">Page 1</div>

    <div style="display: block; position: relative; page-break-before:always;">Page 2</div>

</div>

有什么技巧可以在Chrome中完成吗？

Answer 1

这是一个黑客，但Chrome不支持分页。所以试着改用它：

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

并将此添加到您的css：

html, body, .main, .tabs, .tabbed-content { float: none; }

.break-after {
    display: block;
    page-break-after: always;
    position: relative;
}

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}

Answer 2

请注意要使用分页符，div应该没有浮点数！

因此，如果您的div说出float：left，则将其重置为print并显示：float：none，它将使分页符再次起作用。

Answer 3

它不应该在 flex div 内。如果是，除非关闭 flex div，否则分页符不起作用。

例如：

   <div class="row">
           //bla bla    
   </div>/*close old flex div*/
    <div class="col-12 p-0 display-block break-before"></div>
    <div class="row">/*new flex div*/
              //bla bla
    </div>
    <style>
    .break-before {
        display: block;
        position: relative;
        page-break-before: always !important;   
    }
    </style>

Answer 4

2019年10月，我无法获得以前的答案才能在Chrome中工作。现在看来，必须使用break-before: page而不是break-before: always。

这在FF中也有效，但以前的答案也是如此。

<div>
  <div class="break-before">
    Page 1
  </div>
  <div class="break-before">
    Page 2
  </div>
</div>

.break-before {
  break-before: page;
}

page-break-after在Chrome中不起作用

4 个答案: