4

Tenho uma página que imprime tickets em 3 vias. Cada via do ticket está dentro de uma div com a classe ticket.

Após cada via, preciso gerar uma quebra de página. Porém, ao utilizar o page-break-after: always; no Google Chrome, algumas vezes (a depender do conteúdo), o Google Chrome quebra a página fora do lugar desejado, desconfigurando toda a impressão. (veja na imagem abaixo a imagem que seria a logomarca cortada).

Nesse exemplo, na segunda página, a imagem (que seria a logo) sai cortada

No Microsoft Edge funciona perfeitamente.

Para facilitar a reprodução do erro, segue abaixo o meu código HTML com CSS inline.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

*{font-family: arial;}
@media print {
    .ticket{ 
        page-break-after: always; 
        page-break-inside: avoid;
        position: relative;
    }
    body{
        position: relative;
        background-color:red;
    }
}


</style>
</head>
<body>

    <div class="ticket">
        <img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg" alt="LOGO" /><br/>
        RAZAO SOCIAL DA EMPRESA LTDA.<br/>
        Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
        CNPJ: 11.111.111-1111-11<br/>
        TF: 11.111.111 FP<br/>
        Isento de ISS (lei número 1.111)<br/>
        Telefones: 0800 111 1111 <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        <br/>
        <strong>Via 1</strong>
        <DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
        <DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
        Tipo: XYZ<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
    </div>

    <div class="ticket">
        <img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg" alt="LOGO" /><br/>
        RAZAO SOCIAL DA EMPRESA LTDA.<br/>
        Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
        CNPJ: 11.111.111-1111-11<br/>
        TF: 11.111.111 FP<br/>
        Isento de ISS (lei número 1.111)<br/>
        Telefones: 0800 111 1111 <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        <br/>
        <strong>Via 2</strong>
        <DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
        <DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
        Tipo: XYZ<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
    </div>

    <div class="ticket">
        <img src="http://lorempixel.com/output/animals-q-g-198-44-7.jpg" alt="LOGO" /><br/>
        RAZAO SOCIAL DA EMPRESA LTDA.<br/>
        Endereço: Av. QUALQUER LUGAR, NÚMERO 000. NOME DO BAIRRO.<br/>
        CNPJ: 11.111.111-1111-11<br/>
        TF: 11.111.111 FP<br/>
        Isento de ISS (lei número 1.111)<br/>
        Telefones: 0800 111 1111 <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(00)00000-0000<br/>
        <br/>
        <strong>Via 3</strong>
        <DIV style="border:1px solid #000; padding:10px;font-size:20px;font-weight:bold;width:100%;text-align:center;">Por favor, entregue <br/>esta via ao xxxxxxx</DIV><br/>
        <DIV style="font-size:18px;font-weight:bold;width:100%;text-align:center;">TICKET: <span style="font-weight:bold;">00000000000000</span></DIV>
        Tipo: XYZ<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>OBS: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
        <strong>Info Complementar: </strong>Etiam luctus urna nec metus scelerisque, sed laoreet magna volutpat. Sed ac lacus vitae augue vestibulum condimentum ut et arcu.<br/>
        <strong>More: </strong>Mauris placerat euismod blandit. Donec vel nisl at odio sodales gravida.<br/>
    </div>
</body>
</html>

Como fazer a quebra de página ocorrer no local correto usando o Google Chrome?

3 Respostas 3

2
+50

Cara, fiz uns testes aqui no seu código e consegui fazer funcionar no Chrome. Aparentemente, utilizar elementos de bloco (ex.: div) com bordas, fazem quebrar o layout do page-break. Tente o seguinte:

Troque todas os elementos <div> que você usa com borda pelo elemento <p> e retire do css-inline o width: 100%;

1

Comparando o que você descreveu com algumas situações já apresentadas por usuários como neste link (em inglês), seguem algumas sugestões para tentar solucionar o seu problema:

  1. Verifique e tente alterar a margem da imagem no interior da div;

  2. Alguns usuários relataram que trabalhar com elementos de tabela ao invés de div solucionaram o problema.

Boa sorte, abraço!

1
  • Poderia editar o exemplo acima de modo que fique funcional? Commented 27/10/2016 às 20:24
0

Fiz alguns ajustes no código, peço para sí que veja possivelmente o ajudará:

div.page {
  page-break-after: always;
  page-break-inside: avoid;
}
<div class="page">
  <h1>Pagina 1</h1>
</div>
<div class="page">
  <h1>Pagina 2</h1>
</div>
<div class="page">
  <h1>Pagina 3</h1>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .