应用:使用 Puppeteer 截图 SSR 生成的 HTML 页
wabicai
# 应用:使用 Puppeteer 截图 SSR 生成的 HTML 页
# 使用场景
当 SSR 页面需要做验收、生成封面图、做回归比对或输出分享图时,直接用 Puppeteer 启动无头浏览器截图,通常比手写 HTML 转图片方案更稳定。
# 基本流程
- 启动浏览器实例
- 打开目标 SSR 页面
- 等待关键内容渲染完成
- 截图并保存
- 必要时回传到对象存储或任务系统
# 关键点
- 必须等待 SSR 后的异步数据也完成渲染
- 统一视口尺寸,避免截图结果不一致
- 字体、图片等外部资源需要可访问
- 批量截图时注意浏览器实例复用和并发控制
# 常见问题
- 页面“看起来加载完了”,但异步组件还没挂载完成
- 字体回退导致线上和截图样式不一致
- 长页面截图需要滚动拼接或直接使用全页截图
# 结论
Puppeteer 适合做“以浏览器真实渲染结果为准”的截图任务,重点在于控制好等待时机和运行环境一致性。