Google Chrome Printing Page Breaks

106

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

источник

2009-10-29 22:55:00

+3

Ах я вижу мою проблему я думаю. Я пытался использовать его с тегом
–

+0

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

+0

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

10

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

По-видимому, 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> 

    <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

источник

2010-05-14 09:01:25

+0

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

11

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

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

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

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

источник

2011-07-14 22:23:59 fordareh

+2

Вероятно, потому что плавающий элемент выводит его из потока документов в Точно так же абсолютно позиционируется. Элементы с позицией: абсолютный не будет работать со словом страницы *. –

+1

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

8

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

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

источник

2012-03-12 16:17:02 davidbehan

+0

Это решает проблему для меня. Спасибо! –

+0

Это решает проблему и для меня. Вы - спасатель жизни. - Спасибо, кучи. –

+0

спасибо, ('overflow: auto' не работает) – nicolast

29

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

это делает работу в 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 больше не уважают это, даже с позицией: relative; трюк. Однако, они, кажется, уважают:

-webkit-region-break-inside: avoid;

увидеть эту скрипку: http://jsfiddle.net/petersphilo/QCvA5/23/show

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

Надеется, что это помогает!

источник

2012-09-12 10:58:27 Peter

+0

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

+0

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

+0

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

1

Оказывается, что это имеет сравнительно недавно (февраль 2014) обсуждались (на старом 2005 ошибку билета) на WebKit багтрекере

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

источник

2014-04-21 10:20:38

0

Имейте этот вопрос. Достаточно долгое время ... Без боковых полей страницы это нормально, но когда появятся поля, страница и «пространство разрыва страницы» будут масштабироваться. Таким образом, с нормальным полем внутри документа было показано неверно. исправить его с множеством

width:100%

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

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

Используйте его на первой линии.

источник

2014-05-15 14:11:59 Intey

5

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

источник

2014-06-03 13:48:49 Gudradain

+1

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

+0

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

3

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

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

источник

2015-09-06 15:43:54

0

Насколько я знаю, единственный способ получить правильные разрывы страниц в таблицах с Google Chrome, дает его элемент <tr> свойство дисплей: встроенный стол (или дисплей: встроенный блок, но он лучше подходит в других случаях, которые не являются таблицами). Также следует использовать свойства «page-break-after: always; page-break-inside: avoid;» как написано на @Phil Росс

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

источник

2016-01-05 18:46:39 Codekraft

+1

Любые намеки на то, чтобы это не нарушало границы/пробелы внутри tds? – joeforker

+0

@joeforker вы должны использовать с "padding: 0; margin: 0;" и дать свойства поля элементам, содержащимся внутри. – Codekraft

3

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

Ну, я получил эту проблему, когда я был

overflow:hidden

на моих делах.

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

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

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

источник

2016-06-06 12:51:13

+1

Это решило проблему, когда ничего не делалось. Благодаря! – bstory

1

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

источник

2016-08-29 07:28:18

0

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

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

источник

2017-11-08 01:23:32

Google Chrome Printing Page Breaks

ответ

Смежные вопросы