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

实际上这里发生的事情是您的网页可能需要一段时间才能完整加载。所以我们必须增加超时。在拍摄屏幕截图之前需要500毫秒的短暂休息，然后它将采取整页截图。请尝试以下代码。

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();

Answer 2

您的代码看起来是正确的。你有什么选择？

页面实际启动了吗？尝试关闭无头浏览器以检查：

const browser = await puppeteer.launch({
    headless: false
});

以下内容适合我拍整页截图：

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://yahoo.com');
  await page.screenshot({ path: 'yahooPage.png', fullPage: true });

  browser.close();
}

run();

Node puppeteer截取整页SPA

2 个答案: