Saltos de Página de Impresión de Google Chrome

Estoy tratando de conseguir que Google Chrome para hacer 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 conseguir que funcione incluso con un ejemplo muy simple. ¿hay alguna manera de forzar un salto de página al imprimir en Chrome?

Author: Mike Valstar, 2009-10-27
Source

13 answers

He utilizado el siguiente enfoque con éxito en todos los principales navegadores incluyendo 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 página div contiene muchos más elementos.

 113
Author: Phil Ross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-10-29 22:55:00

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

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

Tanto el elemento padre como el elemento sobre el que desea controlar el salto de página deben declararse como: 

position: relative

Echa un vistazo a 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, el control de page-break-inside en Safari no funciona (al menos en 5.1.7)

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: relativa; 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 añadir eso ahora...

Espero que esto ayude!

 30
Author: Peter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-13 13:33:56

Solo quería señalar aquí que Chrome también ignora la configuración de css page-break-* en los 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 notarlo 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 bloque anterior elemento:

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

 13
Author: fordareh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-20 01:47:37

Estoy teniendo este problema a mí mismo - mis saltos de página funcionan en todos los navegadores, pero Chrome - y fue capaz de aislarlo hasta el elemento de salto de página-después de estar dentro de una celda de tabla. (Plantillas antiguas y heredadas en el CMS.)

Aparentemente Chrome no respeta las propiedades de salto de página antes o salto de página después dentro de las celdas de la tabla, por lo que esta versión modificada del ejemplo de Phil pone 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 es (dudosamente) permitido dada la especificación CSS, puede ver más aquí: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

 10
Author: Nate Cook,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-14 09:01:25

Tuve un problema similar a este, pero finalmente encontré la solución. Tuve overflow-x: hidden; aplicado a la etiqueta , 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.

Esperemos que esto ayude a alguien por ahí.

 9
Author: davidbehan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-12 16:17:02

Tenga cuidado con CSS : display:inline-block al 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>
 5
Author: Gudradain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-03 13:48:49

Me enfrenté a este problema en Chrome antes y la causa es que había un div tiene min-height establecido en un valor. La solución fue restablecer min-height mientras se imprimía de la siguiente manera:

@media print {
    .wizard-content{
        min-height: 0;
    }
}
 4
Author: Hamdy Ahmed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-13 13:35:39

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ó perfecto

 3
Author: Stanislav Talanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-06 12:51:13

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

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

 1
Author: Alex KeySmith,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-21 10:20:38

Si está utilizando 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, destruye los saltos de página. Elimine estos de su página para imprimirlos. Funcionó para mí. (En la versión de Chrome = 49.0.2623.87)

 1
Author: Astra Bear,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-29 07:28:18

Tienen ese problema. Tanto tiempo pasa... Sin los campos laterales de la página, es un salto normal, pero cuando aparecen los campos, la página y el" espacio de salto de página " escalarán. Por lo tanto, 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;
  }

Úsalo en la primera línea.

 0
Author: Intey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-15 14:34:22

Por lo que sé, la única manera de obtener los saltos de página correctos en las tablas con Google Chrome es darle al elemento <tr> la propiedad display: inline-table (o display: inline-block, pero se ajusta mejor en otros casos que no son tablas). También se deben usar las propiedades "page-break-after: always; page-break-inside: avoid;" tal como está escrito por @Phil Ross 

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>
 0
Author: Codekraft,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-27 09:17:22

Estaba funcionando para mí cuando usé relleno como: 

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
 0
Author: Tuvia Khusid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-08 01:23:32