Formatação CSS para geração de PDF

Stack Overflow em Português Asked by Amanda Lima on February 20, 2021

Estou usando um loop para gerar um arquivo PDF. Cada iteração do loop deve gerar uma página do PDF.

O problema é que sempre está saindo uma página em branco no final do PDF gerado. Sei que esta página está saindo porque estou usando a propriedade CSS

page-break-after:always

Se eu tirar o always, a quebra de página não fica correta. Como posso resolver?

O 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;
}

css3 pdf

One Answer

Tente da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" 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>

Answered by Diego Schmidt on February 20, 2021

Formatação CSS para geração de PDF

One Answer

Add your own answers!

Ask a Question