CODEWITHSUNDEEP
phplaravelpdfdompdf
shape
shape

Reputation: 95

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

Upvotes: 0

Views: 6981

Answers (1)

Wale
Wale

Reputation: 1806

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.

Upvotes: 2

Related Questions