CSS formatting for PDF generation

Asked

Viewed 1,274 times

3

I am using a loop to generate a PDF file. Each loop iteration should generate a PDF page.

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

page-break-after:always

If I take the always, page break is not correct. How can I fix?

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

THE CSS

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

  • You wrote it right? Yeah always.

  • True, I wrote it right in the wrong code here. Thank you

  • You tried to use auto ?

  • I tried. As I said, if you use anything other than Always, the page break is wrong

  • How’s your HTML? You can post ?

  • place auto doesn’t solve?

  • @Diegosouza, I edited the question and put the code

  • @Gabrielrodrigues if I use the auto, the page break is wrong.

  • Make a CSS like this: .page-break:last-of-type{&#xA; page-break-after: auto;&#xA;}

  • It didn’t work, the page doesn’t break at the right place

Show 5 more comments

1 answer

1

Try it 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 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>

  • It doesn’t work, change the page

  • I edited it, you can check it out?

Browser other questions tagged css3 pdf

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