Laravel中barryvdh/dompdf无法完整显示数据问题求助

问题描述 #

使用barryvdh/dompdf生成技术服务报告PDF时，内容出现截断无法完整显示，截图如下：

以下是当前使用的Blade代码：

CSS代码 #

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;
    font-weight: bold; /* 修正原无效的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;
    page-break-inside: avoid; /* 新增：避免表格内部被分页截断 */
}
td{
    border-left: 1px solid black;
}
.row-fill{
    border-bottom: 1px solid black;
}
.page-break {
    page-break-after: always; /* 修改为强制分页 */
    clear: both; /* 清除浮动，避免分页元素受前置元素影响 */
}
/* 新增：防止图片超出页面边界 */
img {
    max-width: 100%;
    height: auto;
}

HTML代码 #

<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;page-break-inside: avoid;">
        <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;page-break-inside: avoid;" >
        <?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 
                // 修复循环逻辑：每2个单元格闭合一行
                if ($rcount % 2 == 1){
                    echo '</tr>';
                }
                $rcount++;
            }
            // 处理最后一行未闭合的情况
            if ($rcount % 2 != 0){
                echo '</tr>';
            }
        ?>
    </table>
</body>

已尝试的无效方法 #

• page-break-before : always
• page-break-before : auto
• page-break-after : always
• page-break-after : auto

针对性解决方案 #

1. 修复CSS分页规则

   • 将.page-break的page-break-after设为always，并添加clear: both避免浮动元素干扰分页触发。
   • 给所有表格添加page-break-inside: avoid，防止表格内容被跨页截断。

2. 修正CSS语法错误

   • 原代码中text: bold为无效属性，替换为标准的font-weight: bold。

3. 修复图片表格循环逻辑

   • 原循环中$rcount%2 == 2的判断逻辑错误，改为$rcount%2 == 1，确保每2个单元格正确闭合一行，避免HTML结构混乱导致渲染异常。

4. 防止图片溢出

   • 添加全局图片样式max-width: 100%; height: auto;，确保图片不会超出页面宽度。

5. 调整dompdf配置（可选）
   在生成PDF时明确设置纸张大小和边距，优化渲染效果：

   $pdf = PDF::loadView('your-view-name', $data);
   $pdf->setPaper('A4', 'portrait'); // 设置为A4纵向
   $pdf->setOptions(['dpi' => 150, 'defaultFont' => 'Arial']); // 调整分辨率和默认字体
   return $pdf->download('report.pdf');
   

内容的提问来源于stack exchange，提问作者Tommy Saputra