首页 文章

谷歌Chrome打印分页

提问于
浏览 次
91

我正试图让谷歌浏览器进行分页 .

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

css printing google-chrome

12 回答

  • 0

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

    回复于
  • 33

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

    它 DOES 在Chrome中工作，解决方案真的是 silly !!

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

    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

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

    希望这可以帮助！

    回复于
  • 10

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

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

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

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

    回复于
  • 15

    我自己也遇到了这个问题 - 我的页面在每个浏览器中都有效，但是Chrome - 并且能够将其分离到表格单元格中的分页符元素 . （CMS中旧的，继承的模板 . ）

    显然Chrome不支持表格单元格中的page-break-before或page-break-after属性，因此Phil的示例的这个修改版本将第二个和第三个 Headers 放在同一页面上：

    <!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

    回复于
  • 7

    我遇到了类似的问题，但我最终找到了解决方案 . 我已经 overflow-x: hidden; 应用于<html>标签，所以无论我在DOM下面做了什么，它都不会允许分页 . 通过恢复到 overflow-x: visible; 它工作正常 .

    希望这有助于那里的人 .

    回复于
  • 4

    小心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>
    回复于
  • 1

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

    @media print {
    .wizard-content{
        min-height: 0;
    }
}
    回复于
  • 0

    2016年更新：

    好吧，当我有这个问题时，我遇到了这个问题

    overflow:hidden

    在我的div .

    我做完之后

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

    一切都变得很好，完美

    回复于
  • 3

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

    回复于
  • 10

    有这个问题 . 如此长时间的传递...没有页面的侧面区域，它正常，但是当字段出现时，页面和“分页空间”将缩放 . 因此，对于正常字段，在文档中，它显示不正确 . 我用套装修好了

    width:100%

    并使用

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

    在第一行使用它 .

    回复于
  • 120

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

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

    当我使用填充时，它对我有用：

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

相关问题