css3 – CSS formatting for PDF generation

Question:

I'm using a loop to generate a PDF file. Each iteration of the loop must generate a PDF page.

The problem is that there is always a blank page at the end of the generated PDF. I know this page is coming out because I'm using the CSS property

page-break-after:always

If I remove the always , the page break isn't correct. How can I solve?

The HTML

@foreach($provas as $p)
    <div class="page-break">
        <div class="row">
            <div class="col-md-12">
                <h3 class="text-center">DNA Prova</h3>
            </div>
         </div>
          <Restante do conteúdo da página>
     </div>
@endforeach

O CSS

.page-break{
    page-break-after: always;
}

Answer:

Try this way:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>  
            .page-break {
                page-break-inside: avoid;
                page-break-after: always;
            }

        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="page-break">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-center">DNA Prova1</h3>
                    </div>
                </div>            
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="text-center">Conteudo 1</h4>
                    </div>
                </div>
            </div>

            <div class="page-break">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-center">DNA Prova2</h3>
                    </div>
                </div>
                 <div class="row">
                    <div class="col-md-12">
                        <h4 class="text-center">Conteudo 2</h4>
                    </div>
                </div>
            </div>

            <div class="page-break">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-center">DNA Prova3</h3>
                    </div>
                </div>
                 <div class="row">
                    <div class="col-md-12">
                        <h4 class="text-center">Conteudo 3</h4>
                    </div>
                </div>
            </div>
        </div>
    </body>
</body>
</html>
Scroll to Top
AllEscort