Error while breaking page for printing on Google Chrome

Asked

Viewed 1,428 times

4

I have a page that prints tickets in 3 ways. Each ticket path is within one div with class ticket.

After each route, I need to generate a page break. However, when using page-break-after: always; in Google Chrome, sometimes (depending on the content), Google Chrome breaks the page out of its desired place, defacing the entire print. (see in the image below the image that would be the cut logo).

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

Microsoft Edge works perfectly.

To facilitate playback of the error, please follow below my HTML code with 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>

How to make page break occur in the right location using Google Chrome?

html css google-chrome impression

3 answers

2


Dude, I ran some tests on your code here, and I got it working on Chrome. Apparently, using block elements (e.g., div) with borders will break the page-break layout. Try the following:

Change all the elements <div> that you use edge by element <p> and remove the css-inline width: 100%;

1

Comparing what you described with some situations already presented by users as in this link (in English), follow some suggestions to try to solve your problem:

  1. Check and try to change the image margin inside the div;

  2. Some users reported that working with table elements instead of div solved the problem.

Good luck, hug!

  • You could edit the above example so that it works?

0

I made some adjustments to the code:

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>

Browser other questions tagged html css google-chrome impression

You are not signed in. Login or sign up in order to post.