Puppeteer全屏截图底部留白及重复设置视口问题求助

嘿，我之前也在Puppeteer v1.3.0里踩过全屏截图的坑，你的两次设置视口的操作其实是旧版API的限制导致的，而且底部的空白大概率是视口高度和页面实际高度不匹配或者内容没加载完全的问题。给你几个更顺畅的解决思路：

1. 优化视口设置，告别重复操作 #

旧版Puppeteer里直接设置视口高度时，如果用clientHeight容易拿不准实际页面总高度（它只是当前可见视口的高度），换成scrollHeight能直接获取整个页面的滚动总高度，一步到位设置正确的视口：

// xl断点处理
// 先获取页面完整的滚动高度（包含所有超出视口的内容）
const pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
// 直接设置准确的视口尺寸
await page.setViewport({ width: 1201, height: pageHeight });
// 此时截图无需再用fullPage，直接截就能覆盖整个页面
await page.screenshot({ path: 'xl-screenshot.png' });

2. 解决底部空白的核心方案 #

空白问题大多是页面有动态加载内容（比如图片、异步渲染组件），旧版Puppeteer没等内容加载完就截图了。可以加上等待逻辑确保页面渲染完成：

// 等待页面所有资源加载完毕（networkidle0表示500ms内没有网络请求）
await page.waitForNavigation({ waitUntil: 'networkidle0' });
// 或者等待某个关键渲染元素出现，确保页面内容加载完成
await page.waitForSelector('.footer, .content-container');

// 再获取最精准的页面高度（兼容各种页面结构）
const pageHeight = await page.evaluate(() => {
  const body = document.body;
  const html = document.documentElement;
  // 取所有高度值的最大值，避免页面布局特殊导致高度计算偏差
  return Math.max(
    body.scrollHeight, 
    body.offsetHeight, 
    html.clientHeight, 
    html.scrollHeight, 
    html.offsetHeight
  );
});

await page.setViewport({ width: 1201, height: pageHeight });
// 可选：用clip参数强制限定截图范围，彻底消除空白
await page.screenshot({
  path: 'xl-screenshot.png',
  clip: { x: 0, y: 0, width: 1201, height: pageHeight }
});

3. 针对Puppeteer v1.3.0的特殊提醒 #

这个版本比较老旧，有些API行为和新版不同：

• page.evaluate返回的高度可能带小数，记得用Math.ceil()转成整数，避免截图时出现半像素空白
• 不要依赖fullPage: true，旧版这个参数经常出现计算偏差，手动设置视口高度反而更可靠

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