Laravel 10中使用DomPDF生成物流标签布局问题求助

问题分析 #

DomPDF对传统float布局的支持存在局限性，容易出现元素错位、分页异常等问题；而CSS Grid布局在DomPDF 0.8.0+版本中支持更稳定，适合实现规整的两列标签排列需求。

解决方案：使用CSS Grid重构布局 #

修改HTML模板样式，用Grid替代float布局，同时优化页面边距和分页处理：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Etiquettes A4</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .etiquettes-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 自动生成等宽两列 */
            gap: 20px; /* 统一设置列与行的间距 */
            padding: 20px;
            box-sizing: border-box;
        }

        .etiquette {
            height: 150px;
            border: 1px solid #ccc;
            padding: 10px;
            font-family: sans-serif;
            font-size: 14px;
            border-radius: 5px;
            box-sizing: border-box;
            page-break-inside: avoid; /* 防止单个标签被分页截断 */
        }

        .nom {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .adresse {
            line-height: 1.6;
        }

    </style>
</head>
<body>
    <div class="etiquettes-container">
        @foreach ($etiquettes as $etiquette)
            <div class="etiquette">
                <div class="nom">{{ $etiquette['name'] }}</div>
                <div class="adresse">{{ $etiquette['address'] }}</div>
            </div>
        @endforeach
    </div>
</body>
</html>

关键优化点说明 #

1. Grid布局适配：grid-template-columns: repeat(2, 1fr)自动将容器分为两个等宽列，无需手动计算百分比，适配A4纸宽度更精准。
2. 间距统一管理：用gap替代margin设置列和行的间距，避免float布局中nth-child的margin计算误差。
3. 分页完整性保护：page-break-inside: avoid确保单个物流标签不会被分页拆分，保持内容完整性。
4. 盒模型精准控制：box-sizing: border-box让padding和border不占用额外宽度，保证标签尺寸准确。
5. 页面默认样式重置：清除html和body的默认margin、padding，避免容器宽度被挤压。

备选方案：修复float布局（不推荐） #

如果坚持使用float，需调整宽度计算并添加清除浮动逻辑：

.etiquettes-container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* 清除浮动 */
}

.etiquette {
    width: 47.5%; /* 两列各占47.5%，间距5% */
    height: 150px;
    border: 1px solid #ccc;
    padding: 10px;
    font-family: sans-serif;
    font-size: 14px;
    border-radius: 5px;
    margin-bottom: 20px;
    float: left;
    margin-right: 5%;
    box-sizing: border-box;
    page-break-inside: avoid;
}

.etiquette:nth-child(2n) {
    margin-right: 0;
}

后端代码无需修改 #

你的Laravel后端生成PDF的代码保持不变即可，DomPDF会自动解析新的布局样式。

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