0

请我需要帮助，我的 html 代码工作得很好，并尝试将其加载为 pdf 流，但输出的 pdf 文件与 html 不同，并且文本不在图像上方，但在其下方

我的控制器代码


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

我的html代码


    <!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>

img 如何在 html 页面 html 视图中显示

这就是pdf流输出的样子

pdf流

请我真的很感激任何帮助，如何解决这个问题以及为什么pdf与html不一样>？

4

1 回答 1

0

我认为您的主要问题是这是一个不支持 flexlaravel-pdf的包装器。mPDF

有关受支持的 css，请参阅此列表：https ://mpdf.github.io/css-stylesheets/supported-css.html

于 2021-03-09T00:25:49.260 回答