Laravel 和 barryvdh/laravel-dompdf（html 不能在 Pdf 中正确显示）答案

【问题标题】：Laravel and barryvdh/laravel-dompdf (html not displaying correctly in Pdf )Laravel 和 barryvdh/laravel-dompdf（html 不能在 Pdf 中正确显示）
【发布时间】：2021-03-24 12:16:15
【问题描述】：

我需要在 PDF 中创建这样的模型：

在 html 中像这样很好地工作：

但是当我加载到 pdf(barryvdh dompdf) 时，我得到了这个结果？我不知道为什么有些内容会改变他的位置

这是我的html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
table{
  width: 100%;
}
table tr td{
  text-align: left;
  border:1px solid;
  display: inline-block;
  width: 45%;
  height:150px;
  margin-top: 2px;
}

</style>
</head>
<body>
<table>
    
  <tr>
        @foreach($colisenattent as $coli)  
        <td>
            {{$coli->data}}
        </td>
        @endforeach
  </tr>

</table>

</body>
</html>

【问题讨论】：

能否展示$colisenattent的结构数据
code public function Etiquette($id){ $colisenattent = DB::table('blitems') ->join('colis', 'blitems.colis_id', '=', ' colis.id') ->join('bl','blitems.bl_id','=','bl.id') ->join('users','colis.user_id','=','users. id') ->where('bl_id','=',$id)->select('colis.*', 'blitems.*','users.telephone as country','users.boutique as store') ->获取（）； $pdf = PDF::loadView('Client.Pdf.Etiquettes',compact('colisenattent'));返回 $pdf->stream('invoice.pdf'); }
通过编辑此处难以阅读的问题来添加此内容
按结构我的意思是dd($colisenattent );中显示的内容
集合 {#269 ▼ #items: array:6 [▼ 0 => {#271 ▼ +"id": 79 +"code": "Kamron Lesch" +"etat" ：“Expidié”+“destinataire”：“Sedrick Bogisich”+“电话”：“（987）794-4519 x6352”+“prix”：“286”+“produit”：“Machine Café”+“user_id”：1 +“created_at”：“2020-12-13 14:43:50”+“updated_at”：“2020-12-13 14:43:50”+“colis_id”：103 +“bl_id”：24 +“国家” : "0666813581" +"store": "Lc shop" }

标签： laravel pdf laravel-5 dompdf

【解决方案1】：

问题出在你的 css 上，乍一看还不错。
一开始display: inline-block;这个css会破坏dompdf代码，所以你最终会遇到一些dompdf错误，

Dompdf\异常找不到第 1 行，请使用 HTML 代码在跟踪器中提出问题

所以你需要删除它。
请改用vertical-align: top;。
我还添加了自己的样式以使其接近理想。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px 0px 1px 0px;
 
}

th, td{
  text-align: left;
  vertical-align: top;
  border: 3px solid;
  border-radius: 5px;
  width: 45%;
  height: 150px;
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
} 

</style>
</head>
<body>
<table>
    <thead>
        <tr>
            <td>Text Text</td>
            <td>Text Text</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Text Text</td>
            <td>Text Text</td>
        </tr>
        <tr>
            <td>Text Text</td>
            <td>Text Text</td>
        </tr>
    </tbody>
</table>
</body>
</html>

演示图片

【讨论】：

【解决方案2】：

HTML 当前正在创建包含n 列的单行。您是否希望创建包含两列的 n/2 行？

如果是这样，请尝试以下操作：

<table>
    @for($i = 0; $i < count($colisenattent); $i += 2)
        <tr>
            <td>
                {{ $colisenattent[$i]->data }}
            </td>
            <td>
                @if (isset($colisenattent[$i + 1]))
                    {{ $colisenattent[$i + 1]->data }}
                @endif
            </td>
        </tr>
    @endfor
</table>

【讨论】：

在 html 中效果很好，但是当我尝试转换为 pdf 时，出现此错误：找不到第 1 行，请使用 HTML 代码在跟踪器中提出问题
看起来display: inline-block; 可能有问题？ stackoverflow.com/a/51135354/6472849