dompdflaravel-dompdfbarryvdh

barryvdh/dompdf not completely showing data in Laravel


i'm working with DomPdf in Laravel. But it not showing all the data.

here's the image (I can't embeded the image because don't have enough reputation) :

IMG1

and this my pdf blade :

body{
            background-color: white;
        }
        .h2pdf{
            text-align: center;
        }
        .h5pdf{
            margin-top: -15px;
            text-align: center;
        }
        .devider{
            width:100%;
            height:10px;
            background-color:yellow;
            margin-bottom:20px;
            margin-top:-10px;
        }
        .tr-head{
            text-align: left;
            text-decoration: underline;
            text: bold;
            font-size: 10px;
            height: 1px;
        }
        .title{
            background: #dddddd;
        }
        .tblpdf{
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            border: 1px solid black;
        }
        td{
            border-left: 1px solid black;
        }
        .row-fill{
            border-bottom: 1px solid black;
        }
        .page-break {
            page-break-after: auto;
        }
<body>
    <h2 class="h2pdf">Technical Service Report</h2>
    <h5 class="h5pdf">Address</h5>
    <div class="devider"></div>
    
    <h5 class="h5pdf">TSR No. : {{$head->no_tsr}}</h5>
    
    <table class="tblpdf">
        <tr class="title">
            <td colspan="3">Customer & Mechanic Detail</td>
        </tr>
        <tr class="tr-head">
            <td>Report By</td>
            <td>Mechanic Arrival Date & Time</td>
            <td>Technician</td>
        </tr>
        <tr class="row-fill">
            <td>{{$head->report_creator}}</td>
            <td>{{date('d-M-Y H:i',strtotime($head->mechanic_arrival_date))}}</td>
            <td>{{$head->mechanic_name}}</td>
        </tr>
        <tr class="tr-head">
            <td>Customer</td>
            <td>PIC</td>
            <td>Site/Province</td>
        </tr>
        <tr class="row-fill">
            <td>{{$head->customer_name}}</td>
            <td>{{$head->customer_pic}}</td>
            <td>{{$head->customer_site}}</td>
        </tr>
        <tr class="title">
            <td colspan="3">Unit & Failure Detail</td>
        </tr>
        <tr class="tr-head">
            <td>Brand</td>
            <td>Model</td>
            <td>Category</td>
        </tr>
        <tr class="row-fill">
            <td>{{$head->unit_brand}}</td>
            <td>{{$head->unit_model}}</td>
            <td>{{$head->unit_category}}</td>
        </tr>
        <tr class="tr-head">
            <td>Serial Number</td>
            <td>Hourmeter</td>
            <td>Kilometer</td>
        </tr>
        <tr class="row-fill">
            <td>{{$head->unit_sn}}</td>
            <td>{{$head->unit_hm}}</td>
            <td>{{$head->unit_km}}</td>
        </tr>
        <tr class="tr-head">
            <td>Chasis SN</td>
            <td>Engine SN</td>
            <td>Machine Application</td>
        </tr>
        <tr class="row-fill">
            <td>{{$head->unit_chasis_sn}}</td>
            <td>{{$head->unit_engine_sn}}</td>
            <td>{{$head->unit_application}}</td>
        </tr>
        <tr class="tr-head">
            <td>Commisioning Date</td>
            <td></td>
            <td></td>
        </tr>
        <tr class="row-fill">
            <td>
                @if($head->unit_commissioning_date!=NULL)
                    {{date('d-m-Y',strtotime($head->unit_commissioning_date))}}
                @elseif($head->unit_commissioning_date == NULL)
                    UNKNOWN
                @endif
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr class="tr-head">
            <td>Faulty Type</td>
            <td>Date & Time of Servicing</td>
            <td>Date & Time Completion</td>
        </tr>
        <tr class="row-fill">
            <td>{{$head->faulty_type}}</td>
            <td>{{date('d-M-Y H:i',strtotime($head->job_beginning_date))}}</td>
            <td>
                @if(date('Y-m-d',strtotime($head->job_complete_date))!= '1970-01-01')
                    {{date('d-m-Y H:i',strtotime($head->job_complete_date))}}
                @elseif(date('Y-m-d',strtotime($head->job_complete_date)) == '1970-01-01')
                    UNFINISHED JOB
                @endif
            </td>
        </tr>
        <tr class="tr-head">
            <td>Faulty Group</td>
            <td>Job Type</td>
            <td>Job Status</td>
        </tr>
        <tr class="row-fill">
            <td>{{$head->faulty_group}}</td>
            <td>{{$head->job_type}}</td>
            <td>{{$head->job_status}}</td>
        </tr>
        <tr class="tr-head">
            <td colspan="3" style="border-top:1px solid black;">Condition</td>
        </tr>
        <tr class="row-fill">
            <td colspan="3">{{$head->unit_condition}}</td>
        </tr>
        <tr class="title" style="margin-top:5px;">
            <td colspan="3">Failure (Complaints)</td>
        </tr>
        <tr>
            <td colspan="3">{!!$head->job_complaint!!}</td>
        </tr>
        <tr class="title">
            <td colspan="3">Failure (Analysis)</td>
        </tr>
        <tr>
            <td colspan="3">{!!$head->job_analysis!!}</td>
        </tr>
        <tr class="title">
            <td colspan="3">Failure (Correction)</td>
        </tr>
        <tr>
            <td colspan="3">{!!$head->job_correction!!}</td>
        </tr>
        <tr class="title">
            <td colspan="3">Failure (Parts)</td>
        </tr>
        <tr>
            <td colspan="3">{!!$head->job_failure_parts!!}</td>
        </tr>
    </table>
    
    <div class="page-break"></div>
    <a>Photo(s)</a>
    <table style="text-align:center;border: solid 1px;border-collapse: collapse;">
        <tr class="row-fill">
            <td colspan="2">
                <img src="{{public_path().'/images/TSR/'.$head->url_photo_unit}}" width="350px" height="300px" alt="Unit"><br>Unit
            </td>
        </tr>
        <tr>
            <td>
                <img src="{{public_path().'/images/TSR/'.$head->url_photo_sn}}" width="350px" height="300px" alt="SN"><br>Serial Number
            </td>
            <td>
                <img src="{{public_path().'/images/TSR/'.$head->url_photo_hm}}" width="350px" height="300px" alt="Hm"><br>Hourmeter
            </td>
        </tr>
    </table>
    <div class="page-break"></div>
    <table style="border: solid 0.5px;width:100%;text-align: center" >
        <tr><td></td></tr>
        <?php
            $rcount = 0;
            foreach($detail as $record){
                if ($rcount % 2 == 0){
                    echo '<tr>';
                }
                ?>
                <td>
                <img src="{{public_path().'/images/TSR/'.$record->url_photo}}" width="350px" height="300px" alt="image">
                    <label for="description">{{$record->description}}</label>
                </td>
                <?php if ($rcount % 2 == 2){
                    echo '</tr>';
                }
                $rcount++; 
            }
            //here is a check  condition in case you don't have more times multiple of 3 rows
            if ($rcount % 2 != 0){
                echo '</tr>';
            }
        ?>
    </table>
</body>

I already tried the page-break css with :

But nothing changed. I don't know what the problem is. Please help me, thanks in advance.


Solution

  • I found a way to solve this issue. The data shown completely when we use div instead of table. We just need to add some css on the div so the data will show like we're using table.

    Hopefully other people can solve the problem with this method.