como evitar página em branco extra no final durante a impressão?

Question 1

Estou usando uma propriedade CSS,

Se eu usar page-break-after: always;=> imprime uma página em branco extra antes

Se eu usar page-break-before: always;=> imprime uma página extra em branco depois. Como evitar isso?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

Question 2

Você poderia talvez adicionar

.print:last-child {
     page-break-after: auto;
}

portanto, o último printelemento não obterá a quebra de página extra.

Observe que o seletor: last-child não é compatível com o IE8, se você estiver mirando naquele navegador miserável.

Question 3

Você já tentou isso?

@media print {
    html, body {
        height: 99%;    
    }
}

Question 4

A solução descrita aqui me ajudou ( link do webarchive ).

Em primeiro lugar, você pode adicionar borda a todos os elementos para ver o que faz com que uma nova página seja anexada (talvez algumas margens, preenchimentos, etc.).

div { border: 1px solid black;}

E a solução em si foi adicionar os seguintes estilos:

html, body { height: auto; }

Question 5

se nada disso funcionar, tente isso

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

certifique-se de que é 100vh

Question 6

Isso funciona para mim

.print+.print {
    page-break-before: always;
}

Question 7

Se você só quer usar CSS e evitar quebra de página, use

.print{
    page-break-after: avoid;

}

Dê uma olhada na mídia paginada

Você pode usar equivalentes de script para pageBreakBefore e pageBreakAfter, atribuir dinamicamente seus valores. Por exemplo, em vez de forçar quebras de página personalizadas para os visitantes, você pode criar um script para tornar isso opcional. Aqui, criarei uma caixa de seleção que alterna entre fatiar a página nos cabeçalhos (h2) e a critério da impressora (padrão):

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

Clique aqui para ver um exemplo que usa isso. Você pode substituir H2 dentro do script por outra tag como P ou DIV.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Question 8

Não sei (por enquanto) por que, mas este ajudou:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

Espero que alguém salve seu cabelo enquanto luta contra o problema ...;)

Question 9

Parece que há várias causas possíveis, com o tema provável sendo que a etiqueta do corpo termina com uma altura considerada muito grande por nosso motivo.

Minha causa: min-height: 100%em uma folha de estilo básica.

Minha solução: min-height: autoem uma @media printdiretiva.

Nota, autonão parecia ser um valor correto, de acordo com PhpStorm. No entanto, está correto de acordo com a documentação da Mozilla sobre min-height :

auto
O tamanho mínimo padrão para itens flexíveis, fornecendo um padrão mais razoável do que 0 para outros layouts.

Question 10

definido display:nonepara todos os outros elementos que não são para impressão. configuração visibility:hiddenirá mantê-los ocultos, mas todos eles ainda estão lá e ocuparam espaço para eles. página vazia é para aqueles elementos ocultos.

Question 11

No meu caso, definir a largura para todos os divs ajudou:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Question 12

Mudei a exibição de css e a propriedade de largura da área de impressão

#printArea{
    display:table;
    width:100%;
}

Expandir snippet

Question 13

Tive um problema semelhante, mas a causa era porque eu tinha 40px de margem na parte inferior da página, então a última linha sempre quebraria, mesmo se houvesse espaço para ela na última página. Não por causa de qualquer tipo de page-break-*comando css. Consertei removendo a margem na impressão e funcionou bem. Só queria adicionar minha solução caso outra pessoa tenha algo semelhante!

Question 14

Depois de lutar com várias configurações e alturas de quebra de página e um milhão de regras CSS diferentes na tag do corpo, eu finalmente resolvi isso um ano depois.

Eu tenho um div que deveria ser a única coisa impressa na página, mas estava recebendo várias páginas em branco depois dele. Minha tag corporal está definida como, visibility:hidden;mas não foi o suficiente. Elementos de página verticalmente altos ainda ocupam 'espaço'. Então, adicionei isso em minhas regras de impressão CSS:

#header, #menu, #sidebar{ height:1px; display:none;}

para direcionar divs específicos por seus ids que contêm elementos de layout de página altos. Reduzi a altura e removi-os do layout. Não há mais páginas em branco. Anos depois, fico feliz em dizer ao meu cliente que o descobri. Espero que isso ajude alguém.

Question 15

O Chrome parece ter um bug em que, em certas situações, ocultar elementos pós-carregamento com display: none, deixa muito espaço extra para trás. Eu acho que eles estão calculando a altura do documento antes que ele termine a renderização. O Chrome também dispara 2 eventos de mudança de mídia e não oferece suporte a onbeforeprint etc. Eles são basicamente o exemplo de impressão. Esta é minha solução alternativa:

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

Você dá body class = "printing" no doc pronto, e isso ativa os estilos de impressão. Este sistema permite a modularização de estilos de impressão e visualização de impressão no navegador.

Question 16

Adicione este css à mesma página para estender o arquivo css.

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Question 17

Eu tentei todas as soluções, isso funciona para mim:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Question 18

Acabei de encontrar um caso em que mudar de

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

para

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

corrigiu este problema.

Question 19

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

Isso funcionou para mim.

Question 20

Estranhamente, definir uma borda transparente resolveu isso para mim:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

Talvez seja suficiente definir a borda do elemento do contêiner. <- Não testado.

Question 21

Nenhuma das respostas funcionou comigo, mas depois de ler todas elas, descobri qual era o problema no meu caso. Tenho 1 página Html que quero imprimir, mas estava imprimindo com ela uma página em branco extra. Estou usando AdminLTE um tema bootstrap 3 para a página do relatório a ser impressa e nele a tag de rodapé. Eu queria colocar este texto no canto inferior direito da página:

Impresso por Mr. Someone

Usei o jquery para colocar esse texto em vez do rodapé anterior de "Direitos de cópia" com

$("footer").html("Printed by Mr. Someone");

e por padrão no tema o rodapé da tag usa a classe .main-footer que tem os atributos

padding: 15px;
border-top: 1px solid

que causou um espaço em branco extra, então, depois de saber o problema, tive diferentes opções, e a melhor opção era usar

$( "footer" ).removeClass( "main-footer" );

Apenas naquela página específica

Question 22

Coloque o que você precisa em uma página em um div e use a quebra de página interna: evite nesse div. Seu div permanecerá em uma página e irá para uma segunda ou terceira página, se necessário, mas o próximo div, caso precise fazer uma quebra de página, deve começar na próxima página.

Question 23

Verifique se há algum espaço em branco após a tag html na parte inferior. Remover qualquer espaço em branco abaixo me ajudou

Answer 1

88

Estou usando uma propriedade CSS,

Se eu usar page-break-after: always;=> imprime uma página em branco extra antes

Se eu usar page-break-before: always;=> imprime uma página extra em branco depois. Como evitar isso?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

css printing Angelin Nadar
fonte

qual é a altura da aula de impressão?

Juankysmith,

1

Como se trata de notas fiscais a altura vai ser dinâmica de acordo com o nº de itens.

Angelin Nadar,

4

É assim que fizemos na guerra fria:<div>This page intentionally left blank.</div>

Bob Stein

Answer 2

qual é a altura da aula de impressão?

Juankysmith,

Answer 3

1

Como se trata de notas fiscais a altura vai ser dinâmica de acordo com o nº de itens.

Angelin Nadar,

Answer 4

4

É assim que fizemos na guerra fria:<div>This page intentionally left blank.</div>

Bob Stein

Answer 5

72

Você poderia talvez adicionar

.print:last-child {
     page-break-after: auto;
}

portanto, o último printelemento não obterá a quebra de página extra.

Observe que o seletor: last-child não é compatível com o IE8, se você estiver mirando naquele navegador miserável.

AKX
fonte

88

Está ok, pois "Não suportado no IE" é o recurso padrão do IE

Angelin Nadar,

Para outros leitores, isso não funcionou para mim, mas a resposta abaixo de definir a altura automática no HTML e nos elementos do corpo funcionou perfeitamente.

Cody

Answer 6

88

Está ok, pois "Não suportado no IE" é o recurso padrão do IE

Angelin Nadar,

Answer 7

Para outros leitores, isso não funcionou para mim, mas a resposta abaixo de definir a altura automática no HTML e nos elementos do corpo funcionou perfeitamente.

Cody

Answer 8

101

Você já tentou isso?

@media print {
    html, body {
        height: 99%;    
    }
}

giannis.epp
fonte

2

Para mim funcionou: @media print {html {height: 99%; }}, com o corpo o documento criado ficou maior

Gustavo

10

No meu caso, a Zurb Foundation estava configurando html e body para height: 100%. Consegui substituir isso comheight: auto

zacharydl

4

Confirmando que o comentário de @zacharydl funciona para mim, e também que height: auto;é mais elegante do queheight: 99%;

jontsai

Eu tive esse problema, porque estava definindo a altura do html para 101% para forçar uma barra de rolagem para sempre mostrar. (Elimina o salto entre as páginas) - então sim, 100% de altura no estilo de impressão é uma solução saborosa! - Felicidades.

rob_james

@rob_james para evitar o uso de 101%, você pode definir overflow-y: scroll; para ter sempre a barra de rolagem visível

user161592

Answer 9

2

Para mim funcionou: @media print {html {height: 99%; }}, com o corpo o documento criado ficou maior

Gustavo

Answer 10

10

No meu caso, a Zurb Foundation estava configurando html e body para height: 100%. Consegui substituir isso comheight: auto

zacharydl

Answer 11

4

Confirmando que o comentário de @zacharydl funciona para mim, e também que height: auto;é mais elegante do queheight: 99%;

jontsai

Answer 12

Eu tive esse problema, porque estava definindo a altura do html para 101% para forçar uma barra de rolagem para sempre mostrar. (Elimina o salto entre as páginas) - então sim, 100% de altura no estilo de impressão é uma solução saborosa! - Felicidades.

rob_james

Answer 13

@rob_james para evitar o uso de 101%, você pode definir overflow-y: scroll; para ter sempre a barra de rolagem visível

user161592

Answer 14

46

A solução descrita aqui me ajudou ( link do webarchive ).

Em primeiro lugar, você pode adicionar borda a todos os elementos para ver o que faz com que uma nova página seja anexada (talvez algumas margens, preenchimentos, etc.).

div { border: 1px solid black;}

E a solução em si foi adicionar os seguintes estilos:

html, body { height: auto; }

Michael Radionov
fonte

9

Uau, esse era o meu antigo blog! Eu simplesmente tive o mesmo problema e estava pensando que já consertei isso ^^ pequeno mundo

Miguel Stevens

3

mais 1 para adicionar borda div.

Iftikhar Ali Ansari

Adicionar a borda foi uma ótima ideia !! Isso me ajudou a perceber que havia um conjunto de altura mínima em meu wrapper de página que estava fazendo com que uma página extra fosse exibida. Eu estava batendo minha cabeça contra isso por um tempo. Muito obrigado!

Erichunt

Answer 15

9

Uau, esse era o meu antigo blog! Eu simplesmente tive o mesmo problema e estava pensando que já consertei isso ^^ pequeno mundo

Miguel Stevens

Answer 16

3

mais 1 para adicionar borda div.

Iftikhar Ali Ansari

Answer 17

Adicionar a borda foi uma ótima ideia !! Isso me ajudou a perceber que havia um conjunto de altura mínima em meu wrapper de página que estava fazendo com que uma página extra fosse exibida. Eu estava batendo minha cabeça contra isso por um tempo. Muito obrigado!

Erichunt

Answer 18

33

se nada disso funcionar, tente isso

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

certifique-se de que é 100vh

Bryan Chan
fonte

4

definir a altura para 100vh resolveu meu problema. Obrigado

user2398069

1

"@media print {* {overflow: hidden! important;}}" é muito importante para mim.

shinriyo

1

Finalmente uma resposta para um problema obscuro! Safari no OSX estava mostrando uma página completamente em branco enquanto Chrome, FF e Edge estavam todos bem com a visualização. Muito obrigado!

pop

Ter a altura configurada para 100vh parece impedi-lo de carregar mais de uma página, de forma que se o documento tiver mais de uma página só carrega a primeira página na visualização

Filipe

Answer 19

4

definir a altura para 100vh resolveu meu problema. Obrigado

user2398069

Answer 20

1

"@media print {* {overflow: hidden! important;}}" é muito importante para mim.

shinriyo

Answer 21

1

Finalmente uma resposta para um problema obscuro! Safari no OSX estava mostrando uma página completamente em branco enquanto Chrome, FF e Edge estavam todos bem com a visualização. Muito obrigado!

pop

Answer 22

Ter a altura configurada para 100vh parece impedi-lo de carregar mais de uma página, de forma que se o documento tiver mais de uma página só carrega a primeira página na visualização

Filipe

Answer 23

8

Isso funciona para mim

.print+.print {
    page-break-before: always;
}

Lam
fonte

Isso funcionou para mim melhor do que o resto! Mais algumas informações aqui: blog.jonesed.net/2012/10/…

RemarkLima

Answer 24

Isso funcionou para mim melhor do que o resto! Mais algumas informações aqui: blog.jonesed.net/2012/10/…

RemarkLima

Answer 25

Se você só quer usar CSS e evitar quebra de página, use

.print{
    page-break-after: avoid;

}

Dê uma olhada na mídia paginada

Você pode usar equivalentes de script para pageBreakBefore e pageBreakAfter, atribuir dinamicamente seus valores. Por exemplo, em vez de forçar quebras de página personalizadas para os visitantes, você pode criar um script para tornar isso opcional. Aqui, criarei uma caixa de seleção que alterna entre fatiar a página nos cabeçalhos (h2) e a critério da impressora (padrão):

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

Clique aqui para ver um exemplo que usa isso. Você pode substituir H2 dentro do script por outra tag como P ou DIV.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Answer 26

Não sei (por enquanto) por que, mas este ajudou:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

Espero que alguém salve seu cabelo enquanto luta contra o problema ...;)

Answer 27

4

Parece que há várias causas possíveis, com o tema provável sendo que a etiqueta do corpo termina com uma altura considerada muito grande por nosso motivo.

Minha causa: min-height: 100%em uma folha de estilo básica.

Minha solução: min-height: autoem uma @media printdiretiva.

Nota, autonão parecia ser um valor correto, de acordo com PhpStorm. No entanto, está correto de acordo com a documentação da Mozilla sobre min-height :

auto
O tamanho mínimo padrão para itens flexíveis, fornecendo um padrão mais razoável do que 0 para outros layouts.

George marian
fonte

Acabei de colocar 'min-height: initial! Important;' e funcionou para mim.

Siby Thomas,

@SibyThomas Eu evito a declaração! Important se possível. Isso torna as coisas mais difíceis para substituir propriedades. Eu nem considerei, initialjá que presumi que seria problemático para elementos de tamanho dinâmico. Observe que o valor inicial é 0, então ainda presumo que autogeralmente seja mais útil.

George Marian,

Answer 28

Acabei de colocar 'min-height: initial! Important;' e funcionou para mim.

Siby Thomas,

Answer 29

@SibyThomas Eu evito a declaração! Important se possível. Isso torna as coisas mais difíceis para substituir propriedades. Eu nem considerei, initialjá que presumi que seria problemático para elementos de tamanho dinâmico. Observe que o valor inicial é 0, então ainda presumo que autogeralmente seja mais útil.

George Marian,

Answer 30

definido display:nonepara todos os outros elementos que não são para impressão. configuração visibility:hiddenirá mantê-los ocultos, mas todos eles ainda estão lá e ocuparam espaço para eles. página vazia é para aqueles elementos ocultos.

Answer 31

3

No meu caso, definir a largura para todos os divs ajudou:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Marjanus
fonte

Answer 32

Mudei a exibição de css e a propriedade de largura da área de impressão

#printArea{
    display:table;
    width:100%;
}

Expandir snippet

Answer 33

Tive um problema semelhante, mas a causa era porque eu tinha 40px de margem na parte inferior da página, então a última linha sempre quebraria, mesmo se houvesse espaço para ela na última página. Não por causa de qualquer tipo de page-break-*comando css. Consertei removendo a margem na impressão e funcionou bem. Só queria adicionar minha solução caso outra pessoa tenha algo semelhante!

Answer 34

Depois de lutar com várias configurações e alturas de quebra de página e um milhão de regras CSS diferentes na tag do corpo, eu finalmente resolvi isso um ano depois.

Eu tenho um div que deveria ser a única coisa impressa na página, mas estava recebendo várias páginas em branco depois dele. Minha tag corporal está definida como, visibility:hidden;mas não foi o suficiente. Elementos de página verticalmente altos ainda ocupam 'espaço'. Então, adicionei isso em minhas regras de impressão CSS:

#header, #menu, #sidebar{ height:1px; display:none;}

para direcionar divs específicos por seus ids que contêm elementos de layout de página altos. Reduzi a altura e removi-os do layout. Não há mais páginas em branco. Anos depois, fico feliz em dizer ao meu cliente que o descobri. Espero que isso ajude alguém.

Answer 35

Sim, se você usar visibility: hidden;, ainda ocupará espaço. Se você usar display: none;o espaço será removido. Nesse ponto, você não precisará definir especificamente a altura, apenas FYI.

chapeljuice

Answer 36

O Chrome parece ter um bug em que, em certas situações, ocultar elementos pós-carregamento com display: none, deixa muito espaço extra para trás. Eu acho que eles estão calculando a altura do documento antes que ele termine a renderização. O Chrome também dispara 2 eventos de mudança de mídia e não oferece suporte a onbeforeprint etc. Eles são basicamente o exemplo de impressão. Esta é minha solução alternativa:

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

Você dá body class = "printing" no doc pronto, e isso ativa os estilos de impressão. Este sistema permite a modularização de estilos de impressão e visualização de impressão no navegador.

Answer 37

Adicione este css à mesma página para estender o arquivo css.

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Answer 38

Eu tentei todas as soluções, isso funciona para mim:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Answer 39

Acabei de encontrar um caso em que mudar de

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

para

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

corrigiu este problema.

Answer 40

1

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

Isso funcionou para mim.

hóspede
fonte

Answer 41

Estranhamente, definir uma borda transparente resolveu isso para mim:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

Talvez seja suficiente definir a borda do elemento do contêiner. <- Não testado.

Answer 42

Nenhuma das respostas funcionou comigo, mas depois de ler todas elas, descobri qual era o problema no meu caso. Tenho 1 página Html que quero imprimir, mas estava imprimindo com ela uma página em branco extra. Estou usando AdminLTE um tema bootstrap 3 para a página do relatório a ser impressa e nele a tag de rodapé. Eu queria colocar este texto no canto inferior direito da página:

Impresso por Mr. Someone

Usei o jquery para colocar esse texto em vez do rodapé anterior de "Direitos de cópia" com

$("footer").html("Printed by Mr. Someone");

e por padrão no tema o rodapé da tag usa a classe .main-footer que tem os atributos

padding: 15px;
border-top: 1px solid

que causou um espaço em branco extra, então, depois de saber o problema, tive diferentes opções, e a melhor opção era usar

$( "footer" ).removeClass( "main-footer" );

Apenas naquela página específica

Answer 43

Coloque o que você precisa em uma página em um div e use a quebra de página interna: evite nesse div. Seu div permanecerá em uma página e irá para uma segunda ou terceira página, se necessário, mas o próximo div, caso precise fazer uma quebra de página, deve começar na próxima página.

Answer 44

0

Verifique se há algum espaço em branco após a tag html na parte inferior. Remover qualquer espaço em branco abaixo me ajudou

Wahsei
fonte

como evitar página em branco extra no final durante a impressão?

Respostas: