node.js - Node puppeteer 截图整页 SPA

Question

我有一个带滚动功能的单页应用程序。我想截取整个页面的屏幕截图，但它只给了我可见的部分。我怎样才能让它拍摄整个页面？

  const browser = await puppeteer.launch(options);
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({ path: 'page.png', fullPage: true })
  await browser.close();

Answer 1

实际上这里发生了什么，您的页面可能需要一段时间才能完全加载。所以我们必须增加超时时间。并且在截屏之前先暂停 500ms，然后再截全页。试试下面的代码。

const puppeteer = require('puppeteer');

async function runTest() {
const browser = await puppeteer.launch({
    headless: false,
    timeout: 100000
});

const page = await browser.newPage();
const url = 'https://stackoverflow.com/questions/47616985/node-puppeteer-take-screenshot-full-page-spa';

await page.goto(url, {
    waitUntil: 'networkidle2'
});
await page.waitFor(500);

await page.screenshot({ path: 'fullpage.png', fullPage: true });
browser.close();
}

runTest();