Drukowanie podziałów stron w Google Chrome

110

Próbuję zmusić Google Chrome do tworzenia podziałów stron.

Powiedziano mi z wielu stron internetowych, które page-break-after: always;są poprawne w Chrome, ale nie mogę go uruchomić nawet na bardzo prostym przykładzie. czy istnieje sposób, aby wymusić przerwanie strony podczas drukowania w przeglądarce Chrome?

css printing google-chrome Mike Valstar
źródło
Wygląda na to, że zostało to stosunkowo niedawno (luty 2014) omówione (na starym zgłoszeniu błędu z 2005 roku) w narzędziu do śledzenia błędów pakietu webkit bugs.webkit.org/show_bug.cgi?id=5097
Alex KeySmith Kwietnia

Odpowiedzi:

134

Z powodzeniem zastosowałem następujące podejście we wszystkich głównych przeglądarkach, w tym w 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>

To jest uproszczony przykład. W rzeczywistym kodzie każdy element div strony zawiera o wiele więcej elementów.

Phil Ross
źródło
4
Ach, widzę mój problem, myślę. Próbowałem go użyć z tagiem <br/>
Mike Valstar
@Mike Dzięki za odpowiedź na problem. Nie wiem, dlaczego br nie działa, a div, ale mimo to łatwa zmiana.
Jeff Davis,
działa to, gdy próbujesz użyć strony nadrzędnej, ale nie działa, gdy drukujesz z iframe (oczywiście w chrome).
VJ
Przeczytaj również odpowiedź @ petera poniżej; miał też dobry punkt widzenia position: relative.
wątpliwość1ejack
6
Zgodnie ze specyfikacją break-afteri break-beforestosuj się tylko do block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - oznacza to brak pływaków ani żadnych wymyślnych sztuczek pozycjonujących.
Mikko Rantalainen
34

Właściwie brakuje jednego szczegółu w odpowiedzi, która została wybrana jako zaakceptowana (od Phila Rossa) ....

to CZY pracę w Chrome, a rozwiązanie jest naprawdę głupi !!

Zarówno element nadrzędny, jak i element, na którym chcesz kontrolować łamanie strony, muszą być zadeklarowane jako:

position: relative

sprawdź to skrzypce: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Dotyczy to:

page-break-before
page-break-after
page-break-inside

Jednak kontrola włamania do strony w Safari nie działa (przynajmniej w 5.1.7)

mam nadzieję, że to pomoże!!!

PS: Poniższe pytanie zwróciło uwagę na fakt, że najnowsze wersje Chrome już tego nie przestrzegają, nawet w przypadku pozycji: względna; sztuczka. Jednak wydają się szanować:

-webkit-region-break-inside: avoid;

zobacz to skrzypce: http://jsfiddle.net/petersphilo/QCvA5/23/show

więc myślę, że musimy to teraz dodać ...

Mam nadzieję że to pomoże!

Piotr
źródło
To zależy od używanej wersji WebKit, czy działa, czy nie w Chrome. Sam powiedziałeś, że to nie działa w Safari 5.1.7, więc nie sądzę, że to wcale głupie. Wersja WK w tym, co testowali, może różnić się od tego, co testowaliście.
Joel Peltonen
Ta strona nie działa w Chrome 26.0.1410.65, mam 3 strony, a ostatnia ma tylko jedno słowo). Próbowałem również upewnić się, że zarówno element, do którego chcę zastosować regułę, jak i jego element nadrzędny mają pozycję: względną na mojej własnej stronie, ale nadal nie dodają podziału strony podczas drukowania. Czy jest to więc funkcja, która pojawia się i odchodzi w Chrome?
Joe Dyndale
Masz rację… wygląda na to, że nie działa w najnowszych wersjach Chrome; jednakże możesz go zamienić na: -webkit-region-break-inside: unikaj; (zobacz ten: jsfiddle.net/QCvA5/22/show )
Peter
@Peter Jakieś aktualizacje? Wysłałem pytanie SO z nagrodą, próbując naprawić sytuację, której używam page-break-inside. Jakaś pomoc?
Zach Saucier,
1
To zadziałało w moim przypadku z jedną osobliwością - działa tylko wtedy, gdy wstawię styl w tekście, a nie w oddzielnym pliku css. Używam go na elemencie h7. Wersja Chrome to 38.0.2125.111 m. <h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>
Gavin Simpson
16

Chciałem tylko zauważyć, że Chrome ignoruje również ustawienia podziału strony- * css w elementach div, które zostały przeniesione.

Podejrzewam, że gdzieś w specyfikacji css znajduje się uzasadnienie dźwiękowe, ale pomyślałem, że może to kiedyś komuś pomóc ;-)

Jeszcze jedna uwaga: IE7 nie może potwierdzić ustawień podziału strony bez wyraźnej wysokości w poprzednim elemencie bloku:

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

fordareh
źródło
2
Prawdopodobnie dlatego, że unoszenie elementu powoduje usunięcie go z przepływu dokumentu w taki sam sposób, w jaki ma to miejsce przy absolutnym pozycjonowaniu. Elementy z pozycją: bezwzględne nie będą działać z podziałem strony- *.
Joe Dyndale
1
Ponadto: wśród wszystkich elementów nadrzędnych elementu ze stylem podziału strony nie powinno być żadnych elementów pływających ani pozycjonowanych bezwzględnie. Miałem rodzica bootstrap "col-xs-12", kiedy wyraźnie ustawiłem "float: none", podział strony zaczął działać!
Stalinko
12

Miałem podobny problem, ale w końcu znalazłem rozwiązanie. Miałem overflow-x: ukryty; zastosowany do tagu <html>, więc bez względu na to, co zrobiłem poniżej w DOM, nigdy nie pozwoliłoby na podziały stron. Wracając do overflow-x: visible; działało dobrze.

Mam nadzieję, że to komuś pomoże.

davidbehan
źródło
Zauważ, że każdy element nadrzędny z określonymi właściwościami przepełnienia może powodować ten problem. Właśnie dodałem regułę * { overflow-x: visible }.
Garrett
10

Sam mam ten problem - moje podziały strony działają w każdej przeglądarce oprócz Chrome - i udało mi się go odizolować do elementu podziału strony znajdującego się w komórce tabeli. (Stare, odziedziczone szablony w CMS.)

Najwyraźniej Chrome nie przestrzega właściwości podziału strony przed ani po podziale strony w komórkach tabeli, więc ta zmodyfikowana wersja przykładu Phila umieszcza drugi i trzeci nagłówek na tej samej stronie:

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

Implementacja Chrome jest (wątpliwie) dozwolona, ​​biorąc pod uwagę specyfikację CSS - więcej możesz zobaczyć tutaj: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

Nate Cook
źródło
To był mój problem - zmuszony do używania komórek tabeli do układu przez SharePoint 2007, więc Chrome przestrzegał wszelkich deklaracji układu arkusza stylów drukowania :(
Dexter
8

Uważaj na CSS: display:inline-blockpodczas drukowania.

Żadna z właściwości CCS, aby przejść do następnej strony, nie działałaby dla mnie w Chrome i Firefox, gdyby moja tabela znajdowała się wewnątrz elementu div o stylu display:inline-block

Na przykład nie działa:

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

Ale następująca praca:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>
Gudradain
źródło
1
A także „pływać”. W elementach nadrzędnych nie powinno być żadnych właściwości „float”.
Jimba Tamang
2
To samo zdisplay: flex
Michael Schmid
4

Wcześniej spotkałem się z tym problemem w Chrome, a jego przyczyną jest to, że istniał element div, którego minimalna wysokość została ustawiona na wartość. Rozwiązaniem było zresetowanie minimalnej wysokości podczas drukowania w następujący sposób:

@media print {
    .wizard-content{
        min-height: 0;
    }
}
Hamdy Ahmed
źródło
3

Aktualizacja 2016:

Cóż, mam ten problem, kiedy miałem 

overflow:hidden

na moim div.

Po tym, jak zrobiłem

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

wszystko stało się dobrze i idealnie

x0 z1
źródło
1
To rozwiązało problem, gdy nic innego nie zrobiło. Dzięki!
bstory,
1

Jeśli używasz Chrome z Bootstrap Css, klasy kontrolujące układ siatki, np. Col-xs-12 itp., Używają "float: left", co, jak zauważyli inni, niszczy strony. Usuń je ze swojej strony do drukowania. U mnie to zadziałało. (W wersji Chrome = 49.0.2623.87)

Astra Bear
źródło
0

Mam ten problem. Tak długo minęło ... Bez bocznych pól strony jest to normalne, ale kiedy pojawiają się pola, strona i „odstęp między stronami” będą się skalować. Tak więc w przypadku normalnego pola w dokumencie okazało się, że jest ono nieprawidłowe. Naprawiam to z zestawem

    width:100%

I użyć 

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

Użyj go w pierwszej linii.

Intey
źródło
0

O ile wiem, jedynym sposobem na uzyskanie poprawnych podziałów stron w tabelach z Google Chrome jest nadanie tego elementowi <tr>właściwości display: inline-table (lub display: inline-block ale lepiej pasuje w innych przypadkach, które nie są tabelami ). Należy również używać właściwości „page-break-after: always; page-break-inside: unikaj;” napisany przez @Phil Ross

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>
Codekraft
źródło
1
Jakieś wskazówki, jak to zrobić, aby nie złamać marginesu / wypełnienia wewnątrz tds?
joeforker
@joeforker powinieneś użyć <tr> z "padding: 0; margin: 0;" i nadaj właściwości marginesu zawartym w nim elementom.
Codekraft
-2

U mnie działało, gdy użyłem wypełnienia, takiego jak:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
Tuvia Khusid
źródło
To działało tylko z powodu wypełnienia, a nie z powodu podziału strony
Char