根本原因是headless浏览器跳过隐藏元素的样式计算，导致html2canvas无法补全vertical-align、line-height等依赖布局的属性，引发表格错位；需确保表格可见、重置table-layout/border-collapse/vertical-align等样式，或克隆节点并等待字体加载。
为什么 headless 浏览器里 html2canvas 截表格会错位
根本原因是 headless 环境（如 Puppeteer 无头 Chrome）中，表格元素若处于 display: none、visibility: hidden 或 position: absolute; left: -9999px 等隐藏状态时，浏览器渲染引擎可能跳过部分样式计算逻辑——尤其是 vertical-align、line-height、border-collapse 这类依赖布局上下文的属性。html2canvas 不是真实截图，而是模拟渲染，它无法补全被浏览器“优化掉”的样式。
常见现象包括：表格内容整体下移、列宽塌缩、边框断裂、合并单元格错位。这些在有头浏览器中看似正常，一进 headless 就暴露。
- 确保表格在截图前处于
display: block且在文档流内（不能display: none） - 避免用
visibility: hidden隐藏表格——它保留占位但禁用渲染，html2canvas 仍会读取空盒模型 - 不要依赖
position: absolute移出视口的方式隐藏；改用opacity: 0; pointer-events: none;+z-index: -1更安全
强制重置表格样式再截图
在调用 html2canvas 前，必须显式覆盖关键样式，不依赖继承或默认值。尤其要处理三类易失效属性：
-
table-layout: fixed—— 防止内容撑开列宽，确保列宽由th/td的width或 CSS 控制 -
border-collapse: collapse—— 避免边框双线或间隙，headless 下separate模式极易失真 - 逐个设置
td和th的vertical-align: middle与text-align: center—— 不能只设在table上，html2canvas 不继承
示例代码片段：
立即学习“前端免费学习笔记（深入）”；
const table = document.getElementById('exportTable');
table.style.tableLayout = 'fixed';
table.style.borderCollapse = 'collapse';
<p>Array.from(table.querySelectorAll('td, th')).forEach(el => {
el.style.verticalAlign = 'middle';
el.style.textAlign = 'center';
});</p><p>html2canvas(table).then(canvas => { /<em> ... </em>/ });用克隆节点绕过隐藏状态限制
如果业务逻辑强依赖“隐藏导出区域”，最稳妥的做法不是修样式，而是换节点——把原表格克隆一份，插入到 document.body 可见区域（但视觉不可见），截图完立即移除。这样能保证浏览器完整计算所有样式，且不影响原页面 DOM 结构。
- 克隆必须用
node.cloneNode(true)，否则事件和部分 computed style 会丢失 - 插入前需清除原节点上的
id（避免重复 ID 冲突），可临时加随机后缀 - 插入位置推荐
document.body.appendChild(clone)，不要插在body末尾以外的地方，防止被其他 CSS 规则意外影响 - 务必在
html2canvas的then回调里执行clone.remove()，否则内存泄漏
字体未加载完成导致文字偏移或截断
headless 浏览器默认不等待 Web Font 加载就触发 html2canvas，结果就是文字用 fallback 字体渲染，行高、字宽全变，表格瞬间错乱。这不是样式问题，是时机问题。
修复方式只有两种：
- 在截图前显式等待字体就绪：
document.fonts.load('12px "YourFontName"').then(() => { /* 调用 html2canvas */ }) - 改用系统安全字体（如
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif），规避 Web Font 加载不确定性
真正麻烦的不是某一行代码写错，而是 headless 环境下多个“看起来没问题”的条件叠加失效：隐藏方式 + 表格样式继承链 + 字体加载时机 + html2canvas 渲染路径——少盯住其中一环，导出图片就一定偏。
