Quebras de página de impressão do Google Chrome

110

Estou tentando fazer com que o google chrome faça quebras de página.

Eu ouvi através de um monte de sites que page-break-after: always;é válido no Chrome, mas não consigo fazê-lo funcionar, mesmo com um exemplo muito simples. existe alguma maneira de forçar uma quebra de página ao imprimir no cromo?

css printing google-chrome Mike Valstar
fonte
Parece que isso foi discutido recentemente (fevereiro de 2014) (em um tíquete de bug antigo de 2005) no rastreador de bugs do webkit bugs.webkit.org/show_bug.cgi?id=5097
Alex KeySmith

Respostas:

134

Usei a seguinte abordagem com sucesso em todos os principais navegadores, incluindo o 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 é um exemplo simplificado. No código real, cada div de página contém muitos mais elementos.

Phil Ross
fonte
4
Ah, eu vejo meu problema, eu acho. Eu estava tentando usá-lo com uma tag <br/>
Mike Valstar,
@Mike Obrigado por responder o problema para mim. Não sei por que um br não funciona e um div sim, mas mesmo assim é uma mudança fácil.
Jeff Davis
isso funciona quando você tenta usar com a página pai, mas não funciona quando você imprime a partir do iframe (no cromo, é claro).
VJ
Leia também a resposta de @peter abaixo; ele também tinha um bom argumento position: relative.
du1ejack
6
De acordo com as especificações break-aftere se break-beforeaplicam apenas a block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - isso significa que não há flutuadores ou qualquer truque de posicionamento sofisticado.
Mikko Rantalainen
34

Na verdade, um detalhe está faltando na resposta que foi selecionada como aceita (de Phil Ross) ....

ele FAZ trabalho no Chrome, e a solução é realmente bobagem !!

Tanto o pai quanto o elemento no qual você deseja controlar a quebra de página devem ser declarados como:

position: relative

verifique este violino: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Isso é verdade para:

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

No entanto, controlar a quebra de página no Safari não funciona (no 5.1.7, pelo menos)

Eu espero que isso ajude!!!

PS: A pergunta abaixo trouxe à tona o fato de que as versões recentes do Chrome não respeitam mais isso, mesmo com a posição: relativo; truque. No entanto, eles parecem respeitar:

-webkit-region-break-inside: avoid;

veja este violino: http://jsfiddle.net/petersphilo/QCvA5/23/show

então acho que temos que adicionar isso agora ...

Espero que isto ajude!

Peter
fonte
Depende da versão do WebKit usado se funciona ou não no Chrome. Você mesmo disse que ele não funciona no Safari 5.1.7, então não acho nada bobo. A versão do WK no que eles testaram pode ser diferente da que você testou.
Joel Peltonen
Essa página não funciona no Chrome 26.0.1410.65, recebo 3 páginas e a última só contém uma palavra). Também tentei certificar-me de que o elemento ao qual desejo aplicar a regra e seu pai tenham uma posição: relativa em minha própria página, mas ainda não adicionará a quebra de página ao imprimir. Então, esse é um recurso que vem e vai no Chrome?
Joe Dyndale
Você está certo ... parece não funcionar nas versões recentes do Chrome; no entanto, você pode substituí-lo por: -webkit-region-break-inside: Avoid; (veja este aqui: jsfiddle.net/QCvA5/22/show )
Peter
@Peter Alguma atualização aqui? Eu postei uma pergunta do SO com recompensa tentando consertar uma situação que estou usando page-break-inside. Qualquer ajuda?
Zach Saucier de
1
Isso funcionou para mim com uma estranheza - só funciona se eu colocar o estilo embutido, e não no arquivo css separado. Estou usando em um elemento h7. A versão do 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

Eu só queria observar aqui que o Chrome também ignora as configurações de quebra de página- * css em divs que foram flutuados.

Suspeito que haja uma boa justificativa para isso em algum lugar das especificações de css, mas imaginei que observar que poderia ajudar alguém algum dia ;-)

Apenas outra observação: o IE7 não pode reconhecer as configurações de quebra de página sem uma altura explícita no elemento de bloco anterior:

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

Fordareh
fonte
2
Provavelmente porque a flutuação de um elemento o tira do fluxo do documento da mesma forma que o posicionamento absoluto. Elementos com posição: absoluto não funcionam com quebra de página- *.
Joe Dyndale
1
Além disso: não deve haver nenhum elemento flutuante ou posicionado absoluto entre todos os pais do elemento com estilo de quebra de página. Eu tinha inicializado o pai "col-xs-12", quando defini explicitamente "float: none" para ele, a quebra de página começou a funcionar!
Stalinko
12

Tive um problema semelhante a este, mas acabei encontrando a solução. Eu tinha overflow-x: oculto; aplicada à tag <html>, portanto, independentemente do que eu fizesse a seguir no DOM, nunca permitiria quebras de página. Revertendo para overflow-x: visible; funcionou bem.

Espero que isso ajude alguém lá fora.

Davidbehan
fonte
Observe que qualquer elemento pai com certas propriedades de estouro pode causar esses problemas. Acabei de adicionar a regra * { overflow-x: visible }.
Garrett
10

Eu mesmo estou tendo esse problema - minhas quebras de página funcionam em todos os navegadores, exceto no Chrome - e fui capaz de isolar o elemento de quebra de página depois de estar dentro de uma célula de tabela. (Modelos antigos herdados no CMS.)

Aparentemente, o Chrome não honra as propriedades de quebra de página antes ou depois de dentro das células da tabela, então esta versão modificada do exemplo de Phil coloca o segundo e o terceiro título na mesma 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>

A implementação do Chrome é (duvidosamente) permitida dada a especificação CSS - você pode ver mais aqui: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

Nate Cook
fonte
Este era o meu problema - forçado a usar células de tabela para layout pelo SharePoint 2007, então o Chrome estava obedecendo a quaisquer declarações de layout de folha de estilo de impressão :(
Dexter
8

Cuidado com CSS: display:inline-blockao imprimir.

Nenhuma das propriedades CCS para ir para a próxima página funcionaria para mim no Chrome e Firefox se minha tabela estivesse dentro de uma div com o estilo display:inline-block

Por exemplo, o seguinte não funciona:

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

Mas o seguinte funciona:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>
Gudradain
fonte
1
E "flutuar" também. Não deve haver nenhuma propriedade "flutuante" nos elementos pais.
Jimba Tamang
2
Mesmo comdisplay: flex
Michael Schmid
4

Já enfrentei esse problema no Chrome antes e a causa disso é que havia um div com altura mínima definida como um valor. A solução foi redefinir a altura mínima durante a impressão da seguinte forma:

@media print {
    .wizard-content{
        min-height: 0;
    }
}
Hamdy Ahmed
fonte
3

Atualização de 2016:

Bem, eu tive esse problema, quando tive 

overflow:hidden

no meu div.

Depois que eu fiz

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

tudo ficou bem e perfeito

x0 z1
fonte
1
Isso resolveu o problema quando nada mais o fez. Obrigado!
bstory
1

Se você estiver usando o Chrome com Bootstrap Css, as classes que controlam o layout da grade, por exemplo, col-xs-12 etc, usam "float: left" que, como outros apontaram, destrói as quebras de página. Remova-os de sua página para impressão. Funcionou para mim (Na versão do Chrome = 49.0.2623.87)

Urso Astra
fonte
0

Tenha esse problema. Tanto tempo passa ... Sem os campos laterais da página, a quebra é normal, mas quando os campos aparecem, a página e o "espaço de quebra de página" serão dimensionados. Portanto, com um campo normal, dentro de um documento, ele se mostrava incorreto. Eu conserto com set

    width:100%

E use 

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

Use-o na primeira linha.

Intey
fonte
0

Pelo que eu sei, a única maneira de obter as quebras de página corretas em tabelas com o Google Chrome é dando ao elemento <tr>a propriedade display: inline-table (ou display: inline-block, mas se encaixa melhor em outros casos que não são tabelas ) Também devem ser utilizadas as propriedades "quebra de página após: sempre; quebra de página dentro: evitar;" como 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
fonte
1
Alguma dica para fazer isso não quebrar a margem / preenchimento dentro dos tds?
joeforker
@joeforker você deve usar o <tr> com "padding: 0; margin: 0;" e dar as propriedades de margem aos elementos contidos nele.
Codekraft
-2

Estava funcionando para mim quando usei preenchimento como:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
Tuvia Khusid
fonte
Isso só funcionou por causa do preenchimento e não por causa da quebra de página
Caractere