Posso forçar uma quebra de página na impressão HTML?


188

Estou fazendo um relatório HTML que pode ser impresso e tem "seções" que devem começar em uma nova página.

Existe alguma maneira de colocar algo no HTML / CSS que sinalize ao navegador que ele precisa forçar uma quebra de página (iniciar uma nova página) nesse ponto?

Não preciso que isso funcione em todos os navegadores existentes, acho que posso dizer às pessoas para usar um conjunto específico de navegadores para imprimir isso.

Respostas:


336

Adicione uma classe CSS chamada "pagebreak" (ou "pb"), assim:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Em seguida, adicione uma tag DIV vazia ( ou qualquer elemento de bloco que gere uma caixa ) onde você deseja a quebra de página.

<div class="pagebreak"> </div>

Ele não será exibido na página, mas será interrompido durante a impressão.

PS Talvez isso só se aplique ao usar -after(e também o que mais você poderia estar fazendo com outros <div>s na página), mas eu achei que tinha que aumentar a classe CSS da seguinte maneira:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

7
Mas, como todas as coisas boas do CSS, isso nem sempre funciona de maneira consistente, portanto, teste a luz do dia, para que você não tenha usuários irritados se perguntando por que seu site imprime pilhas de páginas em branco extras!
Zoe

13
De acordo com o MDN, page-break-after"aplica-se a elementos de bloco que geram uma caixa", portanto, usar um <span>elemento vazio não funcionará. É uma idéia melhor aplicá-lo a uma parte do seu conteúdo. Veja developer.mozilla.org/pt-BR/docs/Web/CSS/page-break-after
nullability

1
@ anulabilidade: Boa captura. Eu tinha usado isso principalmente no meu antigo emprego em um controle WebBrowser no WinForms, que usava o IE, o padrão-ouro dos seguintes padrões.
precisa

1
Isso não funcionou para mim no Chrome ... Estou tentando fazer uma quebra de página dentro depois de uma <tr> dentro de uma <table>, funcionará neste caso?
Delphirules

3
Por alguma razão, ao usar esse truque no Chrome, uma linha de pixels da página seguinte estava vazando para a anterior (perceptível ao usar a cor de fundo). Eu fixo-lo usando.pagebreak { min-height: 1px; page-break-before: always; }
pzmarzly

44

Experimente este link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Eu acho que essa é uma resposta melhor, pois não envolve manipular o HTML para obter um efeito visual.
FinnNk

Na verdade, eu gosto mais do outro, pois isso me dá mais controle. Sempre posso atribuir a classe "quebra de paginação" apenas aos H1s que devem fazer a página saltar. Mas ainda é uma boa solução. +1 para @media, embora a tela deva ignorar a quebra de página antes, eu acho. Obrigado!
1811 Daniel Magliola

o h1 é um exemplo do que você pode usar como uma etiqueta para a quebra de impressão. Você pode substituir e marcar o nome da maneira que desejar. você também pode usar page-break-after: sempre
jfarrell

1
h1não é um bom exemplo, pois significa um cabeçalho de 1º nível, e uma página normalmente deve ter apenas um desses títulos.
Jukka K. Korpela

6
Se você quiser pular o primeiro cabeçalho na primeira página, tenteh1:not(:first-child) { page-break-before:always; }
Jeff Atwood

10

Só queria colocar uma atualização. page-break-afteré uma propriedade herdada agora.

Estados da página oficial

Esta propriedade foi substituída pela propriedade break-after .


Observe que essa propriedade é suportada apenas pelos navegadores Microsoft IE e Edge. caniuse.com/…
Benjamin

7

Você pode usar a propriedade CSS page-break-before(ou page-break-after). Basta definir page-break-before: alwayssobre os elementos em nível de bloco (por exemplo, título, div, p, ou tableelementos) que deve começar em uma nova linha.

Por exemplo, para causar uma quebra de linha antes de qualquer cabeçalho de segundo nível e antes de qualquer elemento da classe newpage(por exemplo, <div class=newpage>...), você usaria

h2, .newpage { page-break-before: always }

5

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

Basta adicionar isto onde você precisa que a página vá para a próxima (o texto "página 1" estará na página 1 e o texto "página 2" estará na segunda página).

Page 1
<div style='page-break-after:always'></div>
Page 2

Isso também funciona:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

1

Digamos que você tenha um blog com artigos como este:

<div class="article"> ... </div>

Apenas adicionar isso ao CSS funcionou para mim:

@media print {
  .article { page-break-after: always; }
}

(testado e funcionando no Chrome 69 e Firefox 62).

Referência:


0
  • Podemos adicionar uma tag de quebra de página com o estilo " page-break-after: always " no ponto em que queremos introduzir a quebra de página na página html.
  • " page-break-before " também funciona

Exemplo:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

Ao imprimir o arquivo html com o código acima, a visualização de impressão mostrará três páginas (uma para cada bloco html " HTML_BLOCK_n "), onde, como no navegador, todos os três blocos aparecem seqüencialmente um após o outro.


0

Eu precisava de uma quebra de página após cada terceira linha enquanto usamos o comando print no navegador.

Adicionei <div style = 'page-break-before: always;'> </div>

depois de cada terceira linha e meu div principal exibir: flex; então eu removi a tela: flex; e estava funcionando como eu queria.


0

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

<div class="pagebreak"></div>

-7

@ Chris Doggett faz todo o sentido. Embora, eu encontrei um truque engraçado no lvsys.com , e ele realmente funciona no Firefox e Chrome. Basta colocar esse comentário em qualquer lugar que você queira que a quebra de página seja inserida. Você também pode substituir a <p>tag por qualquer elemento do bloco.

<p><!-- pagebreak --></p>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.