'dompdf inserts blank page at end of document
I'm generating a pdf document using dompdf 0.6.0, and have a strange issue where a blank page is being created at the end. My (simplified) html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>PDF</title>
<style type="text/css">
@page{ margin: 0;}
.page{
width: 612px;
height: 792px;
overflow: hidden;
font-family: Arial, Helvetica;
position: relative;
color: #545554;
page-break-after: always;
}
</style>
</head>
<body>
<div class="page" style="background-image: url(page1.jpg);">
...
</div>
<div class="page" style="background-image: url(page2.jpg);"></div>
<div class="page" style="background-image: url(page3.jpg); color: white;">
...
</div>
</body>
</html>
The first three pages look amazing, but there is a blank page at the end. I've read dompdf is picky about nesting and compliance and such, but the html is super clean and checks out.
Solution 1:[1]
For me the fix was to remove any whitespace between tags.
$html = preg_replace('/>\s+</', "><", $html);
Solution 2:[2]
This happens because of the css you have written page-break-after: always; for page class.
The above style will do a page break after your last page also and dompdf creates a blank page at the end.
Another solution is to write a separate css style for your last page excluding page-break-after: always;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>PDF</title>
<style type="text/css">
@page{ margin: 0;}
.page{
width: 612px;
height: 792px;
overflow: hidden;
font-family: Arial, Helvetica;
position: relative;
color: #545554;
page-break-after: always;
}
.last-page{
width: 612px;
height: 792px;
overflow: hidden;
font-family: Arial, Helvetica;
position: relative;
color: #545554;
}
</style>
</head>
<body>
<div class="page" style="background-image: url(page1.jpg);">
...
</div>
<div class="page" style="background-image: url(page2.jpg);"></div>
<div class="last-page" style="background-image: url(page3.jpg); color: white;">
...
</div>
</body>
</html>
Happy coding!
Solution 3:[3]
In my case it occurred because the content was bigger than the paperSet(). If the content pass at least 1px, dompdf automatically creates another sheet. So you always need to set sizes according the paperSet() proportion you set.
For example: Paper A4 is 210mmx297mm. To make it easier, I recommend to use 'mm' instead of 'px'. Then you can create your divs and add their heights summing them all and making sure it is within 297mm.
To know the papers sizes you can see in this site:
Solution 4:[4]
If you are using an array to store and output your HTML code, and still getting the error, you can remove the last page including page breaks in all pages except the last one, using count() function.
$html='';
$i = 0; //counter
$len = count($output_array);// lenght of the array
foreach($output_array as $output)
{ //store the html in a variable to use it in dompdf
$html.= $output;
if ($i < $len - 1)
{ //if the counter is less than the lenght of the array, add a page break.
$i++;
$html.=' <div class="page_break"></div>';
}
}
Solution 5:[5]
if you have array variable then set this condition in youtpdfhtml.blade.php:
@if($key<($total-1))
<div class="page-break"></div>
@endif
Solution 6:[6]
As Filip Molcik suggested the solution. This is how I implemented this.
$view = view('layouts.qr-pdf');
$html = $view->render();
$html = preg_replace('/>\s+</', "><", $html);
$pdf = PDF::loadHTML($html);
return $pdf->download('asd.pdf');
Solution 7:[7]
By adding
margin-bottom: -20px; to the main or div tag solved my problem.
Solution 8:[8]
I faced the same problem and resolved by changing the page height from -
min-height: 297 mm to min-height: 290 mm
Solution 9:[9]
Just remove, body</> and html</> end tag end of the page with extra line space. And I hope you can remove the extra blank page from the pdf.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
