Python中pdfkit HTML转PDF排版异常：Summary换行不符预期

我来帮你搞定这个布局错位的问题！你遇到的其实是wkhtmltopdf（pdfkit的底层依赖）对现代Flex布局的兼容性限制——它使用的WebKit版本比较老旧，对Flex的宽度计算和换行规则支持不够完善，哪怕你设置了横向页面，还是会因为容器宽度计算偏差导致"Summary"模块被挤到下一行。

结合你的代码，给你几个可行的解决方案：

方案1：优化Flex布局写法，适配旧WebKit #

把外层Flex容器的flex-wrap: wrap去掉（强制不换行），同时调整子元素的宽度规则，用更兼容的属性替代固定的flex和max-width：

<!-- 修改外层容器 -->
<div style="display: flex; margin-right: -15px; margin-left: -15px;">
  <!-- Requests (%)模块容器：用flex:1占满剩余空间，加min-width防止过度压缩 -->
  <div style="position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; flex: 1; min-width: 600px;">
    <div style="background-color: #fff; position: relative; margin-bottom: 1.5rem; border: 0; border-radius: 0.2rem; box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); margin-left: auto !important; margin-right: auto !important; padding-top: 0 !important;">
      <div style=" padding: 0.75rem 1.25rem; border-bottom: 1px solid transparent; font-weight: 500;background: #F0F8FF;">Requests (%)</div>
      <div style="padding: 1.25rem;padding-left: 0.5rem !important;padding-right: 0 !important;">
        <img src="cid:request_offload">
      </div>
    </div>
  </div>
  <!-- Summary模块容器：固定宽度，避免被挤压 -->
  <div style="position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; flex: 0 0 280px; max-width: 280px;">
    <div style="background-color: #fff; position: relative; margin-bottom: 1.5rem; border: 0; border-radius: 0.2rem; box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); margin-left: auto !important; margin-right: auto !important; padding-top: 0 !important;">
      <div style=" padding: 0.75rem 1.25rem; border-bottom: 1px solid transparent; font-weight: 500;background: #F0F8FF;">Summary</div>
      <div style="padding: 1.25rem;padding-left: 1rem !important; padding-right: 1rem !important;height: 245px; box-sizing: border-box;">
        <!-- 原Summary内部内容不变 -->
      </div>
    </div>
  </div>
</div>

方案2：改用Float布局（更兼容旧渲染引擎） #

如果Flex还是有问题，换成Float布局——这是旧版WebKit支持更稳定的布局方式：

<div style="overflow: hidden; margin-right: -15px; margin-left: -15px;">
  <!-- Requests (%)模块：左浮动占70%宽度 -->
  <div style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; width: 70%; float: left;">
    <!-- 原Requests (%)模块内容不变 -->
  </div>
  <!-- Summary模块：左浮动占30%宽度 -->
  <div style="position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; width: 30%; float: left;">
    <!-- 原Summary模块内容不变 -->
  </div>
  <div style="clear: both;"></div> <!-- 清除浮动，避免影响后续布局 -->
</div>

方案3：增强pdfkit的转换参数 #

除了HTML里的meta标签，直接在Python代码中传递wkhtmltopdf的参数，强制设置视口和禁用智能缩放，确保布局和浏览器一致：

import pdfkit

# 配置转换参数
options = {
    'page-size': 'Legal',
    'orientation': 'Landscape',
    'viewport-size': '1920x1080',  # 模拟桌面浏览器视口
    'disable-smart-shrinking': '',  # 禁用自动缩放，防止布局被压缩
    'margin-top': '0mm',
    'margin-right': '0mm',
    'margin-bottom': '0mm',
    'margin-left': '0mm'
}

with open("performance_report.html", "rb") as f:
    html_str = f.read()

pdfkit.from_string(html_str, 'out.pdf', options=options)

额外小贴士 #

1. 尽量使用最新版本的wkhtmltopdf，旧版本对CSS3属性的支持非常有限
2. 可以给页面最外层容器加min-width: 1200px，确保内容不会因为页面宽度不足而换行

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