laravel loadview pdf output not same as html

Question

please i need help i have my html code which working very fine ,and trying to loadview it as pdf stream but the output pdf file , not same as html , and text not above image , but get below it

my controller code


public function pdfdownload($id)
{
    $id = Crypt::decrypt($id);

    $course = Course::where('id', $id)->first();
    $orders = Order::where('course_id', $id)->first();
    $progress = CourseProgress::where('course_id', $course->id)->where('user_id', Auth::user()->id)->first();
    
    $pdf = PDF::loadView('front.certificate.download', compact('course', 'progress'), [], 
    [ 
      'title' => 'Certificate', 
      'orientation' => 'L'
    ]);

   // return $pdf->download('certificate.pdf');
     return $pdf->stream('certificate.pdf');
}

my html code


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style type="text/css" media="all">
            @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
            body{
                margin: 0;
                box-sizing: border-box;
                font-family: 'Roboto', sans-serif;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            h1,h2,h3,h4,h5,h6{
                margin: 0 0 15px;
            }
    
            .certificate-wrapper{
                max-width: 910px;
                border: 1px solid #007B83;
            }
            .certificate-wraper img {
                max-width: 100%;
            }
                    
            /* certificate   Antipasto Pro  */
    
            .certificate_content {
                position: absolute;
                top: 182px;
                right: 29px;
                width: 480px;
            }
            .certificate_content h2 {
                font-size: 29px;
                text-transform: uppercase;
                color: #29AFA7;
                margin-top: 10px;
            }
            .certificate_content h3 {
                text-transform: uppercase;
                color: #29AFA7;
                font-size: 21px;
            }
            .certificate_content span {
                text-transform: uppercase;
            }
            .prisciples {
                font-size: 25px;
                margin-top: 39px;
            }
            .credit {
                margin-top: 27px;
            }
            .prof {
                margin-top: 28px;
            }
            .date_time {
                display: block;
                margin-top: 66px;
                margin-left: 99px;
                color: #000;
                font-size: 18px;
            }
            .code {
                margin-top: 22px;
                display: block;
                margin-left: 83px;
                font-size: 14px;
            }
            /* certificate-end */
            .position-relative{
                position: relative;
            }
    
    
        </style>
    
    
    
    
    
    
    
    
    </head>
    <body>
    
    
    
        <div class="certificate-wrapper">
           <div class="certificate-wraper position-relative certificater-img">
               <img src="certi-main-bg.png" alt="">
    
               <div class="certificate_content">
                   <h2>Basma sherif abd alwahab</h2>
                   <h3 class="prisciples">Principles of Dento-alveolar Surgery
                       with Live Demo on Suture Techniques</h3>
                   
                   <h3 class="credit">2 creidt hours</h3>
    
                   <h3 class="prof">Prof.Ahmed  Elsharkawy</h3>
                   <div class="certi_abs_content">
                       <span class="date_time"> april</span>
                       <span class="code">code</span>
                   </div>
               </div> 
           </div>
       </div>
        
    </body>
    </html>

that how img show in html page html view

that's how pdf stream output looks like

pdf stream

please i would really appreciates any help , how to solve that and why pdf not view same as html >?

Andrew · Answer 1 · 2021-03-09T01:25:17.277

0

I think your main issue is that laravel-pdf is a wrapper for mPDF which does not support flex.

See this list for css that is supported: https://mpdf.github.io/css-stylesheets/supported-css.html

edited Mar 09 '21 at 01:25

answered Mar 09 '21 at 00:25

Andrew

1,745
1
21
29

thanks alot for your reply , however i think script not using dompdf , but https://github.com/niklasravnsborg/laravel-pdf – M.Hossam Mar 09 '21 at 00:41
Ah I see, you should perhaps edit your tags. ```laravel-pdf``` is a wrapper for ```mPDF``` which also does not support ```flex``` https://github.com/mpdf/mpdf/issues/399 – Andrew Mar 09 '21 at 00:50

laravel loadview pdf output not same as html

1 Answers1