dompdf inserts blank page at end of document

R

12

15

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.

Ramiform answered 10/1, 2014 at 7:57 Comment(0)

R

51

Turns out the end </body> and </html> tags were causing the extra page. I removed them, and results are as expected.

I'd imagine its a problem with dompdf, but I spent quite awhile trying to solve the issue and figured this might be of help to others.

Update:

As Joe mentions in the comments, moving the </body> and </html> tags to the same line as your closing </div> works, and remains valid html.

Ramiform answered 10/1, 2014 at 7:57 Comment(5)

I think the problem is not caused by the closing </body> and </html> tags, but actually by the newline that comes after the closing </div> tag. Putting both the </body> and </html> on the same line as the last </div> will also work. – Seneschal 7/8, 2014 at 17:2

Interesting. Good catch @Joe. I'll try to verify that and update my answer. – Ramiform 13/8, 2014 at 18:21

Thanks! I would have never in a million years thought to look at the closing html and body tags. – Dabbs 20/5, 2015 at 18:26

This, and maybe even a trim() on the html string you're about to transform into PDF. An empty space after </html> could make your head ache :) – Undistinguished 21/2, 2017 at 14:56

I solved this issue exchanging <div style="page-break-before: always;"></div>'; to '<div style="page-break-after: always;"></div>'; – Guillermo 14/6, 2019 at 19:50

B

16

For me the fix was to remove any whitespace between tags.

 $html = preg_replace('/>\s+</', "><", $html);

Brophy answered 18/7, 2017 at 9:28 Comment(3)

Yep, that was it for me as well – Araby 6/11, 2019 at 16:9

thanks it was driving me crazy, but for me it was adding a before page blank – Folie 9/6, 2021 at 20:24

For me it was body { height: 100%;}. Removing ``` height: 100%;``` fixed the issue – Statics 5/8, 2023 at 12:35

E

9

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!

Ellynellynn answered 12/11, 2018 at 7:27 Comment(1)

adding .page:last-child { page-break-after: unset; } also works – Rhatany 30/5, 2023 at 1:13

D

2

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.

Diagnosis answered 25/4, 2021 at 21:39 Comment(1)

the 7+ year old accepted answer already says the same thing, and also provides more info. How is your answer helpful in any way to anybody? – Commonweal 25/4, 2021 at 23:35

B

2

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:

https://papersizes.io/

Banerjee answered 27/7, 2021 at 20:52 Comment(0)

E

1

if you have array variable then set this condition in youtpdfhtml.blade.php:

@if($key<($total-1))
  <div class="page-break"></div>
@endif

Esteban answered 20/10, 2020 at 11:47 Comment(0)

T

0

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

Tsaritsyn answered 10/6, 2019 at 11:2 Comment(0)

J

0

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');

Juratory answered 27/7, 2021 at 17:42 Comment(0)

R

0

By adding margin-bottom: -20px; to the main or div tag solved my problem.

Russophobe answered 1/9, 2021 at 4:57 Comment(0)

B

0

I faced the same problem and resolved by changing the page height from -

min-height: 297 mm to min-height: 290 mm

Brink answered 22/2, 2022 at 17:37 Comment(0)

B

0

For me it was because i had a "min-height: 100%;" in a css file. Remove it for not have the extra blank page.

Balladeer answered 1/12, 2022 at 17:18 Comment(1)

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Cayenne 5/12, 2022 at 2:19

L

0

I did concated the css link at the end of the file, which caused the new page.

Like:

[...] //html with </html>
$html .= "<link>[...]</link>";

Which of course causes a new page, but you have to think about it, maybe this helps someone.

P.S.: I don't have enough reputation yet to write this as a comment

Lh answered 19/7 at 16:30 Comment(0)

Recommended topics

Hot tags