2017-12-03 160 views
0

我有一個滾動單頁應用程序。我試圖截取整個頁面的截圖,但它只給了我可見的部分。我怎樣才能讓它拍攝整個頁面?節點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(); 

回答

0

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

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

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

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