Разрывы Страниц Печати Google Chrome

Question

Разрывы Страниц Печати Google Chrome

Я пытаюсь заставить google chrome делать разрывы страниц.

Мне сказали через кучу сайтов, которые page-break-after: always; действительно в chrome, но я не могу заставить его работать даже с очень простым примером. есть ли способ заставить разрыв страницы при печати в chrome?

13 86

css google-chrome printing

13 ответов:

на самом деле одна деталь отсутствует в ответе, который выбран как принятый (от Фила Росса)....

это тут работа в Chrome, и решение действительно глупо!!

как родитель, так и элемент, на который вы хотите управлять разрывом страниц, должны быть объявлены как:
position: relative
проверьте эту скрипку: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Это верно ибо:
page-break-before
page-break-after
page-break-inside
однако управление page-break-inside в Safari не работает (по крайней мере, в 5.1.7)

Я надеюсь, что это помогает!!!

PS: вопрос ниже поднял тот факт, что последние версии Chrome больше не уважают это, даже с позицией: относительный; трюк. Тем не менее, они, кажется, уважают:
-webkit-region-break-inside: avoid;
видите эту скрипку: http://jsfiddle.net/petersphilo/QCvA5/23/show

Так что я думаю, мы должны добавить это сейчас...

надеюсь, что это помогает!

30

Я просто хотел отметить здесь, что Chrome также игнорирует настройки page-break - * css в divs,которые были размещены.

Я подозреваю, что есть разумное оправдание для этого где-то в спецификации css, но я подумал, что это может помочь кому-то когда-нибудь; -)

еще одно примечание: IE7 не может подтвердить параметры разрыва страницы без явной высоты в предыдущем блоке элемент:

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

13

У меня сама эта проблема - мои разрывы страниц работают в каждом браузере, но Chrome - и смог изолировать его до элемента page-break-after, находящегося внутри ячейки таблицы. (Старые, унаследованные шаблоны в CMS.)

по-видимому, Chrome не соблюдает свойства page-break-before или page-break-after внутри ячеек таблицы, поэтому эта модифицированная версия примера Фила помещает второй и третий заголовок на одной странице:
<!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>
реализация Chrome (сомнительно) разрешено с учетом спецификации CSS - вы можете увидеть больше здесь: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

10

У меня была проблема, похожая на эту, но я нашел решение в конце концов. У меня было overflow-x: hidden; применяется к тегу , поэтому независимо от того, что я сделал ниже в DOM, он никогда не разрешит разрывы страниц. Возвращаясь к overflow-x: visible; он работал нормально.

надеюсь, это поможет кто-то.

9

остерегайтесь CSS:display:inline-block при печати.

ни одно из свойств CCS для перехода на следующую страницу не будет работать для меня в Chrome и Firefox, если моя таблица была внутри div со стилем 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>

5

я столкнулся с этой проблемой в chrome раньше, и причиной этого является то, что div имеет минимальную высоту, установленную в значение. Решение состояло в том, чтобы сбросить минимальную высоту при печати следующим образом:
@media print {
    .wizard-content{
        min-height: 0;
    }
}

4

обновление 2016:

Ну, я получил эту проблему, когда у меня было
overflow:hidden
на моем div.

после того, как я составила
@media print {
   div {
      overflow:initial !important
   }
}
все стало просто прекрасно и идеально

3

похоже, что это относительно недавно (февраль 2014) обсуждалось (на старом билете об ошибке 2005 года) на трекере ошибок webkit

https://bugs.webkit.org/show_bug.cgi?id=5097

1

Если вы используете Chrome с Bootstrap Css, классы, которые управляют макетом сетки, например col-xs-12 и т. д., используют "float: left", который, как указывали другие, разрушает разрывы страниц. Удалите их со своей страницы для печати. Это сработало для меня. (На версии Chrome = 49.0.2623.87)

1

есть эта проблема. Так много времени прошло... Без боковых полей страницы это нормально, но когда появляются поля, страница и" пространство разрыва страницы " будут масштабироваться. Так, с нормальным полем, внутри документа, он был показан неверно. Я исправляю это с помощью set
    width:100%
и использовать
div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }
использовать его на первой строке.

0

насколько я знаю, единственный способ получить правильные разрывы страниц в таблицах с Google Chrome-это дать его элементу <tr> свойства дисплей: inline-table (или дисплей: встроенный блок, но он лучше подходит в других случаях, которые не являются таблицами). Также следует использовать свойства "page-break-after: always; page-break-inside: avoid;" как написано @Phil Ross
<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>

0

Phil Ross · Accepted Answer · 2009-10-30 00:55:00

Я успешно использовал следующий подход во всех основных браузерах, включая 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 содержит гораздо больше элементов.