節點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

您的代碼看起來正確。你在傳遞什麼選擇？

頁面是否實際啓動？嘗試關閉模擬瀏覽器來檢查：

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

Answer 2

其實這裏發生了什麼，你的頁面可能花了一段時間完全加載。所以我們必須增加超時時間。在拍攝屏幕截圖之前，請先暫停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();