html截图与页面导出技术路径不同，混用会导致字体丢失、分页错乱、样式失效；html2canvas生成位图，无法替代原生打印或html导出。
HTML 截图本身对页面导出没有直接要求，但它和页面导出是两套完全独立的技术路径——混用时反而会触发样式错乱、字体丢失、分页失效等典型问题。
html2canvas 截图前必须确保 DOM 可稳定渲染
截图不是“拍快照”，而是让 html2canvas 重新遍历并绘制 DOM 树。如果目标元素还在异步加载（比如图片未完成、React 组件未挂载、表格数据未 fetch 完），截出来的就是空白或 loading 状态。
- 必须手动等待关键节点存在：
await page.waitForFunction(() => document.querySelector('#report-content')) - 避免依赖
networkidle0：它只管网络请求，不管 JS 渲染或动画帧；长列表、虚拟滚动、Canvas 图表常在此后才真正就绪 - 若用 Puppeteer，建议加
await page.evaluate(() => window.scrollTo(0, 0))再截图，防止滚动位置干扰布局计算
useCORS 和 allowTaint 参数不生效的常见原因
useCORS: true 仅在图片资源响应头含 Access-Control-Allow-Origin 时起作用；前端设了参数但服务端没配跨域，html2canvas 仍会静默跳过该图片，导致截图缺图或留白。
- 检查浏览器控制台是否有
Cross-origin image load denied报错 -
allowTaint: true在现代浏览器中基本无效（尤其 Chrome 95+），开启后反而可能让 canvas 被标记为“污染”，后续toDataURL()抛SecurityError - 稳妥做法：服务端图片统一加 CORS 响应头，或前端预加载时转成
data:URL 再注入 DOM
导出 PDF 时长内容被截断或模糊的根本原因
不是 html2canvas 没截全，而是默认按视口尺寸渲染 canvas，再缩放到 A4 尺寸导致像素拉伸失真。
- 必须显式传
windowHeight: element.scrollHeight，否则只截当前可视区域 -
scale: 2是必要项，但不能无上限提高（如设scale: 4易触发内存溢出，尤其在低配设备） - 长表格/无限滚动容器需先移除
overflow: hidden和height: xxxpx等限制样式，否则scrollHeight返回值不准
最易被忽略的一点：截图生成的是位图，而页面导出 HTML 或打印 PDF 依赖的是原始 DOM 结构和 CSS 媒体查询（如 @media print）。想靠截图“替代”导出，等于把矢量信息强行压成像素——字体锯齿、线条粗细漂移、分页逻辑彻底失效都是必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
