HTML转PDF出现图片错位视觉bug 网页端渲染正常

导出PDF时的图片错位是PDF渲染引擎对CSS多列布局（columns属性）的兼容性bug导致的。
市面上常见的HTML转PDF工具，不管是基于Chromium的Puppeteer、还是wkhtmltopdf、WeasyPrint，它们的渲染核对CSS Multi-column规范的实现都和普通浏览器有差距，当多列容器里放img这类替换元素时，很容易出现列宽计算偏移、元素跨列错位的问题，你当前用columns: 2写的两列布局刚好踩了这个兼容坑。

• 优先替换布局方案：把多列布局改成兼容性更稳定的Grid布局，PDF渲染场景下Grid的适配度远高于columns属性，替换.container的样式就行，实现的两列无间距效果和你原来的逻辑完全一致：

.container {
  width: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  height: auto;
}
/* 补充图片默认样式，消除行内元素基线间隙、避免图片尺寸溢出列宽 */
.container img {
  width: 100%;
  display: block;
}

• 最小改动兼容方案：如果不想改原有布局逻辑，给容器里的图片强制加禁止拆分属性，避免渲染引擎错误把图片拆到两列导致偏移，同时加了旧版引擎兼容前缀：

.container img {
  break-inside: avoid;
  page-break-inside: avoid;
  width: 100%;
  display: block;
}

• 导出参数校验：导出PDF时要把渲染视口尺寸和你固定的article尺寸（827px*1170px）完全匹配，清空默认打印页边距、开启背景渲染，别让工具自动缩放页面触发布局重排。

注意：调试的时候直接用浏览器自带的打印预览看效果就行，预览的渲染逻辑和最终导出PDF的逻辑完全一致，不用反复导出浪费时间，预览里没有错位的话导出结果就正常。

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