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

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

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

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

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

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

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

5

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

— bilash.saha
fonte

4

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 ...;)

— Adam G.
fonte

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,

3

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.

— Janaka R Rajapaksha
fonte

3

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

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

— Marjanus
fonte

3

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

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

Expandir snippet

— Afshin Razaghi
fonte

3

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!

— AlexMorley-Finch
fonte

2

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.

— Sherri
fonte

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

2

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.

— Dirigível
fonte

1

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>

— Alnassre
fonte

1

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>

— Paulo Weverton
fonte

1

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.

— Terry Horner
fonte

1

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

Isso funcionou para mim.

— hóspede
fonte

1

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.

— alexloehr
fonte

0

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

— Yousef Al-Hadhrami
fonte

0

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.

— Rick Turner
fonte

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