使用Dompdf在PHP中实现PDF页面左右分栏的布局异常问题

核心问题分析 #

你遇到的问题大概率是CSS布局方式不兼容PDF渲染引擎，普通的float布局在生成PDF时容易出现内容溢出分页的情况，改用绝对定位可以解决这个问题。

解决方案代码示例 #

1. 调整CSS样式（关键）

替换原有的.left和.right类样式，使用绝对定位固定区块位置：

/* 页面容器：匹配A4纸尺寸，作为左右区块的定位基准 */
.page-container {
  width: 210mm;
  height: 297mm;
  position: relative;
  overflow: hidden; /* 防止内容溢出容器导致分页 */
  box-sizing: border-box;
}

/* 左侧区块 */
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  padding: 15mm; /* 按需调整内边距 */
  box-sizing: border-box;
}

/* 右侧区块 */
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  padding: 15mm;
  box-sizing: border-box;
}

/* 额外：防止区块内元素强制分页 */
.left h2, .left p, .right h2, .right ul {
  page-break-inside: avoid;
}

2. 对应PHP页面结构

确保内容包裹在统一的页面容器内：

<div class="page-container">
  <div class="left">
    <!-- 左侧内容：个人信息、教育背景等 -->
    <h2>PERSONAL PROFILE</h2>
    <p>Name: Pratik</p>
    <p>Email: example@domain.com</p>
    <!-- 更多左侧内容 -->
  </div>
  <div class="right">
    <!-- 右侧内容：ACHIEVEMENT等 -->
    <h2>ACHIEVEMENT</h2>
    <ul>
      <li>2024 年度优秀项目开发者</li>
      <li>主导完成XX系统重构，性能提升40%</li>
    </ul>
    <!-- 更多右侧内容 -->
  </div>
</div>

额外注意事项 #

• 如果使用dompdf生成PDF，需在配置中开启CSS2.1支持：DOMPDF_ENABLE_CSS2 = true
• 控制右侧内容总高度，确保不超过页面容器高度（297mm减去上下内边距），否则仍会触发分页
• 避免在区块内使用带有page-break-before/page-break-after属性的元素

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