Google Chrome stampa interruzioni di pagina

110

Sto cercando di convincere Google Chrome a fare interruzioni di pagina.

Mi è stato detto tramite un sacco di siti Web che page-break-after: always;è valido in Chrome ma non riesco a farlo funzionare anche con un esempio molto semplice. c'è un modo per forzare un'interruzione di pagina durante la stampa in Chrome?

css printing google-chrome

— Mike Valstar
fonte

Sembra che questo sia stato discusso relativamente di recente (febbraio 2014) (su un vecchio bug ticket del 2005) sul bug tracker webkit bugs.webkit.org/show_bug.cgi?id=5097

— Alex KeySmith

134

Ho utilizzato con successo il seguente approccio in tutti i principali browser, incluso 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>

Questo è un esempio semplificato. Nel codice reale, ogni div di pagina contiene molti più elementi.

— Phil Ross
fonte

4

Ah, vedo il mio problema, penso. Stavo tentando di usarlo con un tag <br/>

— Mike Valstar,

@ Mike Grazie per aver risposto al problema per me. Non sono sicuro del motivo per cui un br non funziona e un div lo fa, ma comunque un cambiamento facile.

— Jeff Davis

funziona quando si tenta di utilizzare con la pagina padre, ma non funziona quando si stampa da iframe (in chrome, ovviamente).

— VJ

Leggi anche la risposta di @ pietro di seguito; aveva anche un buon punto su position: relative.

— doub1ejack

6

Secondo le specifiche break-aftere si break-beforeapplica solo a block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - questo significa niente galleggianti o trucchi di posizionamento fantasiosi.

— Mikko Rantalainen

34

In realtà manca un dettaglio nella risposta selezionata come accettata (da Phil Ross) ....

esso FA lavoro in Chrome, e la soluzione è davvero stupido !!

Sia il genitore che l'elemento su cui si desidera controllare l'interruzione di pagina devono essere dichiarati come:

position: relative

dai un'occhiata a questo violino: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Questo è vero per:

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

Tuttavia, il controllo dell'interruzione di pagina interna in Safari non funziona (almeno in 5.1.7)

Spero che aiuti!!!

PS: La domanda sotto ha fatto emergere il fatto che le recenti versioni di Chrome non lo rispettano più, anche con la posizione: relativo; trucco. Tuttavia, sembrano rispettare:

-webkit-region-break-inside: avoid;

guarda questo violino: http://jsfiddle.net/petersphilo/QCvA5/23/show

quindi immagino che dobbiamo aggiungerlo ora ...

Spero che questo ti aiuti!

— Peter
fonte

Dipende dalla versione di WebKit utilizzata se funziona o meno in Chrome. Tu stesso hai detto che non funziona in Safari 5.1.7, quindi non penso sia affatto stupido. La versione di WK in ciò che hanno testato potrebbe essere diversa da quella che hai testato.

— Joel Peltonen

Quella pagina non funziona in Chrome 26.0.1410.65, ottengo 3 pagine e l'ultima contiene solo una parola). Ho anche provato ad assicurarmi che sia l'elemento a cui voglio applicare la regola che il suo genitore abbiano position: relative sulla mia pagina, ma non aggiungerà comunque l'interruzione di pagina durante la stampa. Quindi questa è una funzionalità che va e viene in Chrome?

— Joe Dyndale

Hai ragione .... non sembra funzionare nelle ultime versioni di chrome; tuttavia, puoi sostituirlo con: -webkit-region-break-inside: evitare; (vedi questo: jsfiddle.net/QCvA5/22/show )

— Peter

@ Peter Eventuali aggiornamenti qui? Ho pubblicato una domanda SO con bounty cercando di risolvere una situazione che sto usando page-break-inside. Qualsiasi aiuto?

— Zach Saucier

1

Questo ha funzionato per me con una stranezza: funziona solo se metto lo stile in linea e non nel file css separato. Lo sto usando su un elemento h7. La versione di Chrome è 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

Volevo solo notare qui che Chrome ignora anche le impostazioni di interruzione di pagina- * css nei div che sono stati flottati.

Sospetto che ci sia una valida giustificazione per questo da qualche parte nelle specifiche CSS, ma ho pensato che un giorno avrebbe potuto aiutare qualcuno ;-)

Solo un'altra nota: IE7 non può riconoscere le impostazioni di interruzione di pagina senza un'altezza esplicita sull'elemento di blocco precedente:

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

— fordareh
fonte

2

Probabilmente perché fluttuare un elemento lo porta fuori dal flusso del documento nello stesso modo in cui lo fa assolutamente posizionando. Gli elementi con position: absolute non funzioneranno con page-break- *.

— Joe Dyndale

1

Inoltre: non dovrebbero esserci elementi mobili o posizionati in modo assoluto tra tutti i genitori dell'elemento con stile di interruzione di pagina. Avevo il genitore bootstrap "col-xs-12", quando ho impostato esplicitamente "float: none", l'interruzione di pagina ha iniziato a funzionare!

— Stalinko

12

Ho avuto un problema simile a questo ma alla fine ho trovato la soluzione. Ho avuto overflow-x: nascosto; applicato al tag <html> quindi, indipendentemente da ciò che ho fatto di seguito nel DOM, non consentirebbe mai interruzioni di pagina. Tornando a overflow-x: visible; ha funzionato bene.

Spero che questo aiuti qualcuno là fuori.

— davidbehan
fonte

Tieni presente che qualsiasi elemento padre con determinate proprietà di overflow può causare questo problema. Ho appena aggiunto la regola * { overflow-x: visible }.

— Garrett

10

Sto riscontrando questo problema da solo - le mie interruzioni di pagina funzionano in tutti i browser tranne Chrome - ed è stato in grado di isolarlo fino all'elemento di interruzione di pagina che si trova all'interno di una cella di tabella. (Vecchi modelli ereditati nel CMS.)

Apparentemente Chrome non rispetta le proprietà di interruzione di pagina prima o interruzione di pagina dopo all'interno delle celle della tabella, quindi questa versione modificata dell'esempio di Phil inserisce il secondo e il terzo titolo sulla stessa pagina:

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

L'implementazione di Chrome è (discutibilmente) consentita data la specifica CSS: puoi vedere di più qui: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

— Nate Cook
fonte

Questo era il mio problema: costretto a utilizzare le celle della tabella per il layout da SharePoint 2007, quindi Chrome obbediva a qualsiasi dichiarazione di layout del foglio di stile di stampa :(

— Dexter

8

Attenzione ai CSS: display:inline-blockdurante la stampa.

Nessuna delle proprietà CCS per andare alla pagina successiva funzionerebbe per me in Chrome e Firefox se la mia tabella fosse all'interno di un div con lo stile display:inline-block

Ad esempio, quanto segue non funziona:

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

Ma il lavoro seguente:

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

— Gudradain
fonte

1

E anche "float". Non dovrebbero esserci proprietà "float" negli elementi padre.

— Jimba Tamang

2

Lo stesso condisplay: flex

— Michael Schmid

4

Ho affrontato questo problema su Chrome prima e la causa è che c'era un div con altezza minima impostata su un valore. La soluzione era ripristinare l'altezza minima durante la stampa come segue:

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

— Hamdy Ahmed
fonte

3

Aggiornamento 2016:

Bene, ho avuto questo problema, quando l'ho avuto

overflow:hidden

sul mio div.

Dopo che ho fatto

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

tutto è diventato perfetto e perfetto

— x0 z1
fonte

1

Questo ha risolto il problema quando nient'altro ha fatto. Grazie!

— bstory

1

Se stai usando Chrome con Bootstrap Css le classi che controllano il layout della griglia es. Col-xs-12 ecc. Usano "float: left" che, come altri hanno sottolineato, distrugge le interruzioni di pagina. Rimuovili dalla pagina per la stampa. Ha funzionato per me. (Sulla versione Chrome = 49.0.2623.87)

— Astra Bear
fonte

0

Hai quel problema. Passa così tanto tempo ... Senza i campi laterali della pagina è normale, ma quando i campi vengono visualizzati, la pagina e lo "spazio di interruzione di pagina" vengono ridimensionati. Quindi, con un campo normale, all'interno di un documento, è stato mostrato non corretto. Lo aggiusto con il set

    width:100%

e utilizzare

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

Usalo in prima riga.

— Intey
fonte

0

Per quanto ne so, l'unico modo per ottenere le interruzioni di pagina corrette nelle tabelle con Google Chrome è dare all'elemento <tr>la proprietà display: inline-table (o display: inline-block ma si adatta meglio in altri casi che non sono tabelle ). Inoltre dovrebbero essere usate le proprietà "page-break-after: sempre; page-break-inside: evitare;" come scritto da @Phil Ross

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

— Codekraft
fonte

1

Qualche suggerimento su come ottenere questo per non rompere il margine / riempimento all'interno del tds?

— joeforker

@joeforker dovresti usare <tr> con "padding: 0; margin: 0;" e dare le proprietà del margine agli elementi contenuti all'interno.

— Codekraft

-2

Stava funzionando per me quando ho usato imbottiture come:

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

— Tuvia Khusid
fonte

Questo ha funzionato solo a causa del riempimento e non a causa dell'interruzione di pagina

— Char