Search code examples
phplaravelpdfdompdf

Laravel dompdf not displayng as the view


I am trying to generate a book cover, in my blade view it looks ok but when I generate the pdf it doesn't look like the preview

Book front preview

PDF Generated

my blade view:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css">
    <title>Cover</title>
</head>
<body class="bg-cover-blue">
    <div>
        <h1 style="margin-left: 880px;margin-top: 290px;"> {{ $title }}</h1>
        <p style="margin-left: 980px;"> {{ $owner }}</p>
    </div>
</body>
</html>

my css:

.bg-cover-blue{
    background-image: url(../img/covers/blue.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
$data = ['title' => $title, 'owner' => $owner, 'color' => $covercolor,]; $pdf = PDF::loadView('pdf.covertest', $data) ->save(storage_path('../public/pdf/cover/') . 'cover'.$id.'.pdf');

Solution

  • Hi Ramiro, This might not really solve your problem, but it sure will help you understand what's going on.

    According to https://github.com/barryvdh/laravel-dompdf, I guess you probably should change your pdf orientation to horizontal in other to capture more screen area.

    I am finding it difficult to understand why the library refuse to capture the whole screen regardless of the orientation, it's like it target a specific viewport or so, or maybe because it's an image ? well, this is not detailed in the documentation.

    Below is what I am able to achieve, it very much closer to what you want and you might like it for time sake.

    enter image description here

    Blade Sample code:

    <!DOCTYPE html>
    <html style="margin: 0; padding: 0">
    <head>
        <title>Cover</title>
    </head>
    <body class="bg-cover-blue" style="margin: -15%; background-size: cover; background: url('https://i.sstatic.net/UWJtU.jpg') no-repeat center;">
    <div>
        <h1 style="margin-left: 880px; margin-top: 350px;"> {{ $title }}</h1>
        <p style="margin-left: 980px;"> {{ $owner }}</p>
    </div>
    </body>
    </html>
    

    Php Sample Code:

    function returnView(){
    
            $data = [
                'owner'=>"Ramiro",
                'title'=>"StackOverflow"
            ];
    
            $path = "/qrcodes/"."stackoverflow.pdf";
    
           $pdf = PDF::loadView('email.sample', $data)->setPaper('letter', 'landscape')->save(public_path($path));
    
            return $pdf->stream("Halloa.pdf");
    
           //return view('email.sample', $data);
        }
    

    Note: the negative margin actually does not matter, it's still will look pretty good without it.