Порушення сторінки друку Google Chrome

110

Я намагаюся отримати Google Chrome, щоб робити розриви сторінок.

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

css printing google-chrome

— Майк Валстар
джерело

Виявляється, про це відносно недавно (лютий 2014 року) обговорювалося (про старий квиток на помилку на 2005 рік) у веб-програмі трек-помилок bugs.webkit.org/show_bug.cgi?id=5097

— Алекс Кейсміт

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 Дякую за відповідь на проблему. Не впевнений, чому бр не працює, а діва робить, але, тим не менш, це легко змінити.

— Джефф Девіс

це працює при спробі використання з батьківською сторінкою, але не працює, коли ви друкуєте з iframe (звичайно, в хромі).

— VJ

Прочитайте також відповідь @ peter нижче; він також мав добрий пункт про position: relative.

— сумневу1ejack

6

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

— Мікко Ранталайнен

34

Насправді, одна відповідь відсутня у відповіді, обраній як прийнята (від 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 вже не поважають цього, навіть із позицією: relativno; хитрість. Однак вони, схоже, поважають:

-webkit-region-break-inside: avoid;

дивіться цю скрипку: http://jsfiddle.net/petersphilo/QCvA5/23/show

так що я думаю, що ми повинні додати це зараз ...

Сподіваюся, це допомагає!

— Петро
джерело

Це залежить від версії WebKit, яка використовується в Chrome чи ні. Ви самі сказали, що це не працює в Safari 5.1.7, тому я не думаю, що це зовсім нерозумно. Версія WK у тому, що вони тестували, може відрізнятися від тестованої вами.

— Джоел Пелтонен

Ця сторінка не працює в Chrome 26.0.1410.65, я отримую 3 сторінки, а на останній є лише одне слово). Я також спробував переконатись, що і елемент, до якого я хочу застосувати правило, і його батьківський параметр мають положення: відносно моєї власної сторінки, але він все одно не додасть розрив сторінки під час друку. Так це функція, яка приходить і переходить у Chrome?

— Joe Dyndale

Ви маєте рацію .... це, здається, не працює в останніх версіях хрому; проте ви можете замінити його на: -webkit-region-break-inside: Avoid; (див. цей: jsfiddle.net/QCvA5/22/show )

— Петро

@Peter Будь-які оновлення тут? Я розмістив запитання про щедрість, намагаючись виправити ситуацію, якою я користуюся page-break-inside. Будь-яка допомога?

— Зак Сосьє

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 також ігнорує налаштування css для розбиття сторінок у дівах, які плавали.

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

Ще одна примітка: IE7 не може підтвердити налаштування розриву сторінки без явної висоти попереднього блокового елемента:

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

— fordareh
джерело

2

Ймовірно, тому, що плаваючий елемент виймає його з документообігу так само, як це абсолютно позиціонує. Елементи з позицією: абсолют не працюватиме з розривом сторінки- *.

— Джо Дайндал

1

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

— Сталінко

12

У мене виникло питання, подібне до цього, але я врешті знайшов рішення. У мене був переповнення-х: приховано; застосовано до тега <html>, тому незалежно від того, що я робив нижче в DOM, він ніколи не дозволить переламати сторінку. Поверненням до переповнення-х: видимий; це працювало чудово.

Сподіваємось, це допомагає комусь там.

— Давидбехан
джерело

Зауважте, що будь-який батьківський елемент із певними властивостями переповнення може спричинити ці проблеми. Я щойно додав правило * { overflow-x: visible }.

— Гарретт

10

У мене сама ця проблема - моя сторінка порушує роботу в кожному браузері, окрім Chrome - і змогла виділити її до елемента переривання сторінки, що знаходиться всередині комірки таблиці. (Старі, успадковані шаблони в 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=uk

— Нейт Кук
джерело

Це була моя проблема - змушений використовувати клітинки таблиці для компонування від SharePoint 2007, тому Chrome дотримувався будь-яких декларацій макета аркуша друку :(

— Dexter

8

Остерігайтеся CSS: display:inline-blockпід час друку.

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

І "плавати" також. У батьківських елементах не повинно бути ніяких "плаваючих" властивостей.

— Jimba Tamang

2

Те саме зdisplay: flex

— Майкл Шмід

4

Я раніше стикався з цим питанням щодо хромування, і причиною цього є те, що в div було встановлено значення min-висоти. Рішення полягало в тому, щоб скинути мінімальну висоту під час друку наступним чином:

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

— Хамді Ахмед
джерело

3

Оновлення 2016 року:

Що ж, цю проблему я отримав, коли мав

overflow:hidden

на моєму діві.

Після того, як я зробив

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

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

— x0 z1
джерело

1

Це вирішило проблему, коли нічого іншого не зробили. Дякую!

— bstory

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;
  }

Використовуйте його на першому рядку.

— Інтей
джерело

0

Наскільки мені відомо, єдиний спосіб отримати правильні розриви сторінок у таблицях за допомогою Google Chrome - це надання елементу відображення<tr> властивості : inline-table (або display: inline-block, але він краще вписується в інших випадках, які не є таблицями ). Також слід використовувати властивості "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>

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

— Тувія Хусід
джерело

Це спрацювало лише через прокладку, а не через розрив сторінки

— Чар