Разрывы страниц при печати в Google Chrome

110

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

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

css printing google-chrome

— Майк Валстар
источник

Похоже, что это относительно недавно (февраль 2014 г.) обсуждалось (в старом сообщении об ошибке 2005 г.) в системе отслеживания ошибок webkit bugs.webkit.org/show_bug.cgi?id=5097

— Alex KeySmith

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 страницы содержит намного больше элементов.

— Фил Росс
источник

4

Я вижу свою проблему, я думаю. Я пытался использовать его с тегом <br/>

— Майк Валстар,

@Mike Спасибо, что ответили за меня на проблему. Не уверен, почему br не работает, а div работает, но, тем не менее, это легко изменить.

— Джефф Дэвис,

это работает, когда вы пытаетесь использовать с родительской страницей, но не работает, когда вы печатаете из iframe (конечно, в хроме).

— VJ

Также прочтите ответ @peter ниже; у него также была хорошая точка зрения position: relative.

— doub1ejack

6

В соответствии со спецификацией break-afterи break-beforeприменимо только к block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - это означает отсутствие поплавков или каких-либо хитроумных трюков с позиционированием.

— Микко Ранталайнен 02

35

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

он ДЕЙСТВИТЕЛЬНО работает в 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 больше не соблюдают это, даже с position: relative; обмануть. Однако они, кажется, уважают:

-webkit-region-break-inside: avoid;

см. эту скрипку: http://jsfiddle.net/petersphilo/QCvA5/23/show

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

Надеюсь это поможет!

— Питер
источник

Работает он в Chrome или нет, зависит от используемой версии WebKit. Вы сами сказали, что это не работает в Safari 5.1.7, поэтому я не думаю, что это вообще глупо. Версия WK в том, что они тестировали, может отличаться от того, что вы тестировали.

— Joel Peltonen

Эта страница не работает в Chrome 26.0.1410.65, я получаю 3 страницы, а на последней есть только одно слово). Я также попытался убедиться, что элемент, к которому я хочу применить правило, и его родительский элемент имеют position: relative на моей странице, но при печати он все равно не добавляет разрыв страницы. Так это функция, которая появляется и исчезает в Chrome?

— Джо Диндейл

Вы правы ... в последних версиях Chrome это не работает; однако вы можете заменить его на: -webkit-region-break-inside: escape; (см. это: jsfiddle.net/QCvA5/22/show )

— Питер

@Peter Здесь есть обновления? Я отправил SO-вопрос с наградой, пытаясь исправить ситуацию, которую я использую page-break-inside. Любая помощь?

— Zach Saucier

1

Это сработало для меня с одной странностью - это работает, только если я помещаю стиль в строку, а не в отдельный файл css. Я использую его на элементе h7. Версия Chrome - 38.0.2125.111 м.

<h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>

— Гэвин Симпсон

16

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

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

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

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

— Fordareh
источник

2

Скорее всего, потому что плавающий элемент выводит его из потока документов точно так же, как и абсолютное позиционирование. Элементы с position: absolute не будут работать с page-break- *.

— Джо Диндейл

1

Также: не должно быть никаких плавающих или абсолютно позиционированных элементов среди всех родителей элемента со стилем разрыва страницы. У меня был родительский элемент bootstrap «col-xs-12», когда я явно установил для него «float: none», разрыв страницы начал работать!

— Сталинко

12

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

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

— Давидбехан
источник

Обратите внимание, что любой родительский элемент с определенными свойствами переполнения может вызвать эти проблемы. Я только что добавил правило * { overflow-x: visible }.

— Garrett

10

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

— Нейт Кук
источник

Это была моя проблема - SharePoint 2007 заставил использовать ячейки таблицы для макета, поэтому Chrome подчинялся любым объявлениям макета таблицы стилей печати :(

— Декстер

8

Остерегайтесь 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>

— Гудрадаин
источник

1

И «плавать» тоже. В родительских элементах не должно быть никаких свойств типа «float».

— Джимба Таманг

2

То же самое сdisplay: flex

— Майкл Шмид

4

Я раньше сталкивался с этой проблемой в chrome, и причиной этого было то, что для div было установлено значение min-height. Решением было сбросить минимальную высоту при печати следующим образом:

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

— Хамди Ахмед
источник

3

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

Ну, у меня возникла эта проблема, когда у меня

overflow:hidden

на моем div.

После того, как я сделал

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

все стало просто отлично и идеально

— x0 z1
источник

1

Это решило проблему, когда ничего не помогло. Спасибо!

— bstory 03

1

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

— Астра Медведь
источник

0

Есть эта проблема. Проходит столько времени ... Без боковых полей страницы это нормально, но когда поля появляются, страница и «пространство разрыва страницы» будут масштабироваться. Итак, с нормальным полем в документе оно было показано неверно. Я исправляю это с помощью набора

    width:100%

и использовать

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

Используйте его в первой строке.

— Intey
источник

0

Насколько мне известно, единственный способ получить правильные разрывы страниц в таблицах с помощью Google Chrome - это передать элементу <tr>свойство display: inline-table (или display: inline-block, но он лучше подходит для других случаев, которые не являются таблицами. ). Также следует использовать свойства «разрыв страницы после: всегда; разрыв страницы внутри: избегать;» как написано @Phil Ross

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

— Codekraft
источник

1

Есть какие-нибудь подсказки, как заставить это не нарушать поля / отступы внутри tds?

— joeforker

@joeforker вы должны использовать <tr> с «padding: 0; margin: 0;» и присвойте свойства поля содержащимся внутри элементам.

— Codekraft

-2

У меня это сработало, когда я использовал отступы, например:

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

— Тувия Хусид
источник

Это сработало только из-за заполнения, а не из-за разрыва страницы

— Char