Odoo 17产品价格表报表样式异常问题求助

问题分析 #

虽然你确认两张图片尺寸完全相同，但报表渲染时的布局差异大概率来自以下几点：

• 图片行内元素默认的间距或垂直对齐方式差异
• 表格单元格因相邻内容高度变化被撑开，导致图片显示位置偏移
• wkhtmltopdf（Odoo PDF渲染引擎）对img标签样式的解析优先级问题

修复方案 #

方案1：调整图片与单元格的核心样式 #

修改你的QWeb代码，补充垂直对齐、图片填充方式和块级显示属性：

<t t-set="product_image" t-value="p.product_id.image_1920 if p.product_id.is_product_variant else p.product_tmpl_id.image_1920"/>
<td style="width:10%;border-collapse: collapse;border: none;text-align: center;vertical-align: middle;">
   <img t-attf-src="data:image/*;base64,{{product_image}}" style="width:60px !important; height:60px !important; object-fit: cover; display: block;"/>
</td>

• vertical-align: middle：强制图片在单元格内垂直居中，避免因单元格高度变化导致偏移
• object-fit: cover：按比例填充60x60容器，图片不变形（若需完整显示图片，改用object-fit: contain，会保留空白但维持比例）
• display: block：消除img标签默认的行内元素底部留白

方案2：改用背景图替代img标签（适配旧版wkhtmltopdf） #

如果你的wkhtmltopdf版本较低，object-fit可能不支持，可改用单元格背景图实现：

<t t-set="product_image" t-value="p.product_id.image_1920 if p.product_id.is_product_variant else p.product_tmpl_id.image_1920"/>
<td style="width:10%;border-collapse: collapse;border: none;text-align: center;vertical-align: middle; width:60px; height:60px; background-image: url(data:image/*;base64,{{product_image}}); background-size: cover; background-position: center center;">
</td>

方案3：固定表格行高度 #

若相邻单元格内容高度不一致导致当前单元格被撑开，可给表格行设置固定高度：

<tr style="height: 80px;">
  <!-- 你的单元格内容 -->
</tr>

额外排查点 #

1. 确认两张图片的实际宽高比：即使像素尺寸相同，若一张是正方形、一张是长方形，渲染时会因比例差异出现视觉上的布局不同
2. 检查报表全局样式：部分Odoo模板会自带全局img样式，可能覆盖你的局部样式，可通过添加自定义class并提升样式优先级解决

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