Node puppeteer 截图整页 SPA答案

【问题标题】：Node puppeteer take screenshot full page SPANode puppeteer 截图整页 SPA
【发布时间】：2018-02-14 20:22:31
【问题描述】：

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

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

【问题讨论】：

标签： node.js puppeteer google-chrome-headless

【解决方案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();

【讨论】：

这是一个很好的答案和示例！但是，您不需要 page.waitFor，因为您正在使用 waitUntil 属性，这是解决此特定问题的完美解决方案。
仅供参考，waitFor 方法已弃用，用法应替换为对更显式方法的调用，例如。等待选择器。请参阅文档github.com/puppeteer/puppeteer/blob/main/docs/…

【解决方案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();

【讨论】：

这不适用于长页面，不适合屏幕分辨率