应用:使用 Puppeteer 截图 SSR 生成的 HTML 页

# 应用:使用 Puppeteer 截图 SSR 生成的 HTML 页

# 使用场景

当 SSR 页面需要做验收、生成封面图、做回归比对或输出分享图时,直接用 Puppeteer 启动无头浏览器截图,通常比手写 HTML 转图片方案更稳定。

# 基本流程

  1. 启动浏览器实例
  2. 打开目标 SSR 页面
  3. 等待关键内容渲染完成
  4. 截图并保存
  5. 必要时回传到对象存储或任务系统

# 关键点

  • 必须等待 SSR 后的异步数据也完成渲染
  • 统一视口尺寸,避免截图结果不一致
  • 字体、图片等外部资源需要可访问
  • 批量截图时注意浏览器实例复用和并发控制

# 常见问题

  • 页面“看起来加载完了”,但异步组件还没挂载完成
  • 字体回退导致线上和截图样式不一致
  • 长页面截图需要滚动拼接或直接使用全页截图

# 结论

Puppeteer 适合做“以浏览器真实渲染结果为准”的截图任务,重点在于控制好等待时机和运行环境一致性。

Last Updated: 9/25/2026, 2:08:32 PM