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

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.

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;
    }
}

Experimente este link

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

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 .

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 }

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)

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:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; nota importante: aqui está dito, This property has been replaced by the break-after property.mas não funcionou para mim break-after. Além disso, o documento MDN sobre break-afternão parece ser específico para quebras de página, então eu prefiro manter o (funcionando) page-break-after: always;.

• 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.

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.

CSS

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

HTML

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

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