如何让Puppeteer自动设置视口为页面全高以实现整页截图？

完全可以实现需求，Puppeteer针对该场景有两种成熟的实现方式，均不需要提前预知页面实际高度：

方案1：使用内置全页截图参数（最简便） #

page.screenshot() 方法本身自带 fullPage 配置项，开启后Puppeteer会自动计算页面完整渲染高度，直接输出全页截图，不需要手动调整视口参数。
示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 仅需指定你需要的视口宽度，高度无需固定设置
  await page.setViewport({ width: 1000, height: 800 });
  // 等待页面渲染完成
  await page.goto('https://你的测试页面地址', { waitUntil: 'networkidle2' });
  // 开启fullPage参数即可自动截全图
  await page.screenshot({
    path: 'fullpage_screenshot.png',
    fullPage: true
  });
  await browser.close();
})();

该方案适合绝大多数普通页面的全页截图需求，无需额外处理高度计算逻辑。

方案2：手动获取页面高度调整视口 #

如果你需要先把视口高度调整为和页面完整高度一致（比如需要做全页交互操作、不需要内置截图逻辑的场景），可以通过执行前端JS获取页面实际高度后再更新视口参数。
示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 先设置固定视口宽度
  await page.setViewport({ width: 1000, height: 800 });
  await page.goto('https://你的测试页面地址', { waitUntil: 'networkidle2' });
  // 执行JS获取页面完整高度
  const fullPageHeight = await page.evaluate(() => document.body.scrollHeight);
  // 更新视口参数，高度替换为页面实际高度
  await page.setViewport({
    width: 1000,
    height: fullPageHeight
  });
  // 此时视口和页面高度完全匹配，无需滚动即可查看全部内容
  await page.screenshot({ path: 'fullpage_screenshot.png' });
  await browser.close();
})();

注意事项 #

• 如果页面存在懒加载资源，需要先触发页面滚动加载所有懒加载内容，再计算高度或截图，否则会出现内容缺失的问题
• 针对有动态渲染内容的页面，建议搭配 page.waitForSelector() 等API确保所有内容渲染完成后再执行后续操作

内容的提问来源于stack exchange，提问作者Jake Wilson