DOMPDF is not loading CSS

I am trying to generate a pdf file from my laravel view. I am trying to do it with domPDF and mPDF. I have seen some examples where using external css files occurs the "missing css" problem so I have tried with writing all the css inline the view file. The pdf is generating perfectly but some css is being applied on the PDF, some are not. Like background color, font color, image sizing these three are working. but nothing else!

How can I get the PDF without loosing any CSS?

here is my code of the view page

 <!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Test Page</title>
<style type="text/css" media="all">
*{
 margin:0;
padding: 0;
}
html{
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background-color: aquamarine;

}
.container{
    width: 1140px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.top_t_BG {
    background: #76323F;
    color:#fff;
}
.top_text{
    width: 600px;
    padding: 40px;
}
.pro_image{
    width: 400px;
}
.pro_image img{
    height: 160px;
    float: right;
    padding: 25px;
}
.after_top_first{
    display: flex;
    flex-direction: row;
background: #59252F;
    height: 82px;
}
.flex-item{
    width: 331px;
    font-size: 19px;
    padding: 21px;
    color:#fff;
}


</style>
</head>
<body>
<div class="container top_t_BG">

    <div class="top_text">
        <h1>Test Name</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has   been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like.   </p>
</div>
    <div class="pro_image">
        <img  src="{{ $ppimage }}">
    </div>
</div>
<div class="container after_top_first">
    <div class="flex-item">
    <i class="fa fa-envelope"></i> [email protected]
    </div>
    <div class="flex-item">
    <i class="fa fa-phone"> 019xxxxxxx</i>
    </div>
    <div class="flex-item">
    <i class="fa fa-map-marker"></i> xxxxxx road, xxxxxx,bangladesh.
    </div>
</div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">     </script>
    <script  src="https://code.jquery.com/jquery-3.2.1.js"></script>

</body>
</html>

here is the code in controller:

$pdf = PDF::loadView('pages.profile.general_test', ['works'=> $works, 'projects'=>$projects, 'achivements' => $achivements, 'educations' => $educations, 'profile_user' => $profile_user, 'user_skills' => $user_skills, 'friend_status'=>$friend_status, 'ppimage'=>$ppimage]);

return $pdf->download('document.pdf');

NoxxieNl

6 years ago

Level 4

Have you looked at the package from spatie regarding browsershot: https://github.com/spatie/browsershot

Maybe this package can help you? Uses the chrome engine to render a page to PDF.

1 like

Sinnbeck

6 years ago

Level 102

I feel quite certain that dompdf is running on older webkit meaning it does not know of flex. Imaging it rendering in internet explorer 9.

From their page

At its heart, dompdf is (mostly) a CSS 2.1 compliant HTML

Flex is css 3

Please or to participate in this conversation.