CODEWITHSUNDEEP
phplaravelpdf-generationdompdf
Nistha Adhikari
Nistha Adhikari

Reputation: 147

Laravel blade to pdf converter (dompdf) content all ovelapped, bootstrap not working

I am trying to generate a bill for my system in Laravel, for which I have created a blade with my bill format as below:

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bill</title>
    <link rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> 
    <style type="text/css" media="all">
        body { font-family: "Roboto", serif; font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: #000000; }
        .table { color: #000; }
        .table td, .table th { border-top: 1px solid #000;
            border-bottom: 1px solid #000;}
        .table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }
        .small-heading{
            font-size: 0.8rem;
            border: groove;
        }
        #sign {
            position: relative;
            min-height: 150px;
        }
        #sign-content {
            position: absolute;
            bottom: 0;
        }
        #thankyou{
            position: absolute;
            bottom: 0;
            right:0;
        }
    </style>
  </head>
  <body class="bg-light">
<div class="container-fluid pt-2" style="border:1px solid black;">
    <!-- Invoice heading -->
    <table class="table table-borderless">
        <tbody>
        <tr>
            <td class="border-0">
                <div class="row">
                    <div class="col text-center text-left mb-3">
                        <p>Counter</p>
                    </div>
                    <div class="col-md text-center mb-3 mb-md-0" style="min-width: 50%">
                        <h2 class="mb-1"> DIAMOND </h2>
                    </div>
                    <div class="col text-center text-md-right">
                        <p>Phone: 78787878789
                        </p>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="row">
        <div class="col">
            <div class="table-responsive-xl" style="min-height: 500px">
                <table class="table" style="margin-bottom: 0; width:100%;">
                    <thead>
                        <tr>
                            <th>क्र.सं.<br>S.N </th>
                            <th>Description of Goods</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td >Tilhari</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="w-100"></div>
        <div class="col-md mt-0  text-md-left mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black;
         border-bottom:solid 1px black;">
            <p class="small-heading mb-2 text-center mt-3"> <strong>Carat</strong> </p>
            <div class="row">
                <div class="col-md-6 text-md-center">
                    24 Carat 100 <br>
                </div>
                <div class="col-md-6 text-md-center">
                    24 Carat 100<br>
                </div>
            </div>
        </div>
        <div class="col-md mb-3 mb-md-0" style="max-width:23% ;border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
            <p class="small-heading mb-2 text-center mt-3"><strong>Imp</strong></p>
        </div>
        <div class="col-md mb-3 mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
        </div>
        <div class="col" style="padding-left: 0">
            <table class="table" style="margin: 0">
                <tbody>
                    <tr>
                        <td colspan="12">
                        </td><td class="text-right">Total</td>
                        <td>$2,400.00</td>
                    </tr>
                </tbody>
            </table>
            <div id="sign" class="col" style="height: 150px; border-bottom:1px solid black">
                <span id="thankyou">Thank you!</span>
            </div>
        </div>
    </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-md">
                    <div class="row">
                        Email: <u></u>
                    </div>
                </div>
                <div class="col-md">
                    On Sale!
                </div>
                <div class="col-md text-center ml-5" >
                    <p style="text-align: left">981111111
                    </p>
                </div>
            </div>
        </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

I have used dompdf to generate the bills but upon generating the bill, it is generated succesfully but the layout is all messed up. It is not as it seem in the browser. In the browser: enter image description here

pdf generated: enter image description here

How can I fix the issue?

Upvotes: 2

Views: 1176

Answers (1)

Nistha Adhikari
Nistha Adhikari

Reputation: 147

Through my research, I found out that Dompdf does not yet support Bootstrap grid system, due to which my contents were getting overlapped. I re-wrote all the css and the issue got fixed.

Upvotes: 1

Related Questions