节点puppeteer采取截图全页SPA

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个滚动单页应用程序。我试图截取整个页面的截图，但它只给了我可见的部分。我怎样才能让它拍摄整个页面？节点puppeteer采取截图全页SPA

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

回答：

您的代码看起来正确。你在传递什么选择？

页面是否实际启动？尝试关闭模拟浏览器来检查：

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

回答：

其实这里发生了什么，你的页面可能花了一段时间完全加载。所以我们必须增加超时时间。在拍摄屏幕截图之前，请先暂停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();

以上是 节点puppeteer采取截图全页SPA 的全部内容， 来源链接： utcz.com/qa/260187.html

回到顶部