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>