Saltos de página de impresión de Google Chrome

110

Estoy intentando que Google Chrome haga saltos de página.

Me han dicho a través de un montón de sitios web que page-break-after: always;es válido en Chrome, pero parece que no puedo hacer que funcione incluso con un ejemplo muy simple. ¿Hay alguna forma de forzar un salto de página al imprimir en Chrome?

css printing google-chrome Mike Valstar
fuente

Parece que esto se ha discutido relativamente recientemente (febrero de 2014) (en un antiguo ticket de error de 2005) en el rastreador de errores de webkit bugs.webkit.org/show_bug.cgi?id=5097

Alex KeySmith

134

He utilizado el siguiente enfoque con éxito en todos los principales navegadores, incluido 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>

Este es un ejemplo simplificado. En el código real, cada div de página contiene muchos más elementos.

Phil Ross
fuente

4

Ah, veo mi problema, creo. Estaba intentando usarlo con una etiqueta <br/>

Mike Valstar

@ Mike Gracias por responder el problema por mí. No estoy seguro de por qué un br no funciona y un div sí, pero no obstante es un cambio fácil.

Jeff Davis

esto funciona cuando intenta usar con la página principal, pero no funciona cuando imprime desde iframe (en Chrome, por supuesto).

VJ

También lea la respuesta de @peter a continuación; él también tenía un buen punto al respecto position: relative.

double1ejack

6

De acuerdo con las especificaciones break-aftery se break-beforeaplica solo a block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - eso significa que no hay flotadores ni trucos de posicionamiento sofisticados.

Mikko Rantalainen

34

En realidad, falta un detalle en la respuesta que se selecciona como aceptada (de Phil Ross) ...

que HACE trabajo en Chrome, y la solución es realmente tonto !!

Tanto el elemento principal como el elemento en el que desea controlar el salto de página deben declararse como:

position: relative

mira este violín: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Esto es cierto para:

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

Sin embargo, controlar el salto de página dentro de Safari no funciona (en 5.1.7, al menos)

¡¡¡espero que esto ayude!!!

PD: La pregunta a continuación planteó el hecho de que las versiones recientes de Chrome ya no respetan esto, incluso con la posición: relativo; truco. Sin embargo, parecen respetar:

-webkit-region-break-inside: avoid;

ver este violín: http://jsfiddle.net/petersphilo/QCvA5/23/show

así que supongo que tenemos que agregar eso ahora ...

¡Espero que esto ayude!

Pedro
fuente

Depende de la versión de WebKit utilizada si funciona o no en Chrome. Usted mismo dijo que no funciona en Safari 5.1.7, así que no creo que sea una tontería en absoluto. La versión de WK en la que probaron podría ser diferente de la que usted probó.

Joel Peltonen

Esa página no funciona en Chrome 26.0.1410.65, obtengo 3 páginas y la última solo tiene una palabra). También intenté asegurarme de que tanto el elemento al que quiero aplicar la regla como su padre tengan posición: relativa en mi propia página, pero aún así no agregará el salto de página al imprimir. Entonces, ¿es esta una función que aparece y desaparece en Chrome?

Joe Dyndale

Tienes razón ... no parece funcionar en versiones recientes de Chrome; sin embargo, puede reemplazarlo con: -webkit-region-break-inside: evitar; (ver este: jsfiddle.net/QCvA5/22/show )

Peter

@Peter ¿Alguna actualización aquí? Publiqué una pregunta SO con recompensa tratando de solucionar una situación que estoy usando page-break-inside. ¿Alguna ayuda?

Zach Saucier

1

Esto funcionó para mí con una rareza: solo funciona si pongo el estilo en línea, y no en el archivo css separado. Lo estoy usando en un elemento h7. La versión de Chrome es 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

Solo quería señalar aquí que Chrome también ignora la configuración de salto de página- * css en divs que se han flotado.

Sospecho que hay una justificación sólida para esto en algún lugar de la especificación css, pero pensé que notar que podría ayudar a alguien algún día ;-)

Solo otra nota: IE7 no puede reconocer la configuración de salto de página sin una altura explícita en el elemento de bloque anterior:

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

fordareh
fuente

2

Probablemente porque la flotación de un elemento lo saca del flujo de documentos de la misma manera que lo hace con el posicionamiento absoluto. Los elementos con posición: absoluto no funcionarán con salto de página- *.

Joe Dyndale

1

Además: no debería haber ningún elemento de posición absoluta o flotante entre todos los padres del elemento con estilo de salto de página. Tenía bootstrap "col-xs-12" parent, cuando establecí explícitamente "float: none", ¡el salto de página comenzó a funcionar!

Stalinko

12

Tuve un problema similar a este, pero finalmente encontré la solución. Tenía overflow-x: hidden; aplicado a la etiqueta <html>, por lo que no importa lo que hice a continuación en el DOM, nunca permitiría saltos de página. Volviendo a overflow-x: visible; funcionó bien.

Espero que esto ayude a alguien.

Davidbehan
fuente

Tenga en cuenta que cualquier elemento principal con determinadas propiedades de desbordamiento puede provocar este problema. Acabo de agregar la regla * { overflow-x: visible }.

Garrett

10

Yo mismo tengo este problema: mis saltos de página funcionan en todos los navegadores menos en Chrome, y pude aislarlo hasta el elemento page-break-after que está dentro de una celda de tabla. (Plantillas antiguas heredadas en el CMS).

Aparentemente, Chrome no respeta las propiedades page-break-before o page-break-after dentro de las celdas de la tabla, por lo que esta versión modificada del ejemplo de Phil coloca el segundo y tercer título en la misma página:

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

La implementación de Chrome está (dudosamente) permitida dada la especificación CSS; puede ver más aquí: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

Nate Cook
fuente

Este era mi problema: forzado a usar celdas de tabla para el diseño de SharePoint 2007, por lo que Chrome obedecía cualquier declaración de diseño de hoja de estilo de impresión :(

Dexter

8

Tenga cuidado con CSS: display:inline-blockal imprimir.

Ninguna de las propiedades CCS para ir a la página siguiente funcionaría para mí en Chrome y Firefox si mi tabla estuviera dentro de un div con el estilo display:inline-block

Por ejemplo, lo siguiente no funciona:

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

Pero el siguiente trabajo:

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

Gudradain
fuente

1

Y "flotar" también. No debería haber propiedades "flotantes" en los elementos principales.

Jimba Tamang

2

Lo mismo condisplay: flex

Michael Schmid

4

Me enfrenté a este problema en Chrome antes y la causa es que había un div con altura mínima establecida en un valor. La solución fue restablecer la altura mínima durante la impresión de la siguiente manera:

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

Hamdy Ahmed
fuente

3

Actualización de 2016:

Bueno, tengo este problema, cuando tuve

overflow:hidden

en mi div.

Después de que hice

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

todo se volvió bien y perfecto

x0 z1
fuente

1

Esto resolvió el problema cuando nada más lo hizo. ¡Gracias!

bstory

1

Si está usando Chrome con Bootstrap Css, las clases que controlan el diseño de la cuadrícula, por ejemplo, col-xs-12, etc., usan "float: left" que, como otros han señalado, arruina los saltos de página. Elimínelos de su página para imprimir. Funcionó para mí. (En la versión de Chrome = 49.0.2623.87)

Oso astra
fuente

0

Tiene ese problema. Ha pasado tanto tiempo ... Sin campos laterales de la página es normal, pero cuando aparecen los campos, la página y el "espacio de salto de página" se escalarán. Entonces, con un campo normal, dentro de un documento, se mostró incorrecto. Lo arreglo con set

    width:100%

y use

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

Úselo en la primera línea.

Intey
fuente

0

Hasta donde yo sé, la única forma de obtener los saltos de página correctos en las tablas con Google Chrome es dándole al elemento <tr>la propiedad display: inline-table (o display: inline-block pero encaja mejor en otros casos que no son tablas ). También deben usarse las propiedades "page-break-after: always; page-break-inside: evitar;" escrito por @Phil Ross

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

Codekraft
fuente

1

¿Alguna sugerencia sobre cómo hacer que esto no rompa el margen / relleno dentro del tds?

joeforker

@joeforker debes usar el <tr> con "padding: 0; margin: 0;" y otorgue las propiedades de margen a los elementos contenidos dentro.

Codekraft

-2

Funcionó para mí cuando usé relleno como:

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

Tuvia Khusid
fuente

Esto solo funcionó por el relleno y no por el salto de página

Char

Saltos de página de impresión de Google Chrome

Respuestas: