导航页面，直到呈现最后一帧不networkidel

我正在截取大型html的截图，但每次我尝试拍摄图像时，都会在输出图像中获得大的空白区域。

我做了这么多的testing，并且发现在load事件之后渲染了框架，所以我不明白它在捕获的图像中。

这是显示性能的图像 显示load事件的红线和该行后面的帧。

我试图阅读包的所有文件，但我是一个土木工程师，不知道在编程很多，我尽我所能，找不到解决scheme。

page.goto有4个选项，它们不能解决问题，这里是文档的url。 https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options

这是我的代码

 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('D:\Image_2.HTML', {waitUntil: 'load'}); function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } console.log(page.frames()) await page.screenshot({path: 'example.png',fullPage : true}); await browser.close(); })(); 

Answer 1

我用另一个软件包解决了这个问题，问题是在写图像而不是渲染。 所以我把这个大的形象分成了四个季度

 /* Dependencies */ const chromeLauncher = require('lighthouse/chrome-launcher/chrome-launcher'); const CDP = require('chrome-remote-interface'); const fs = require('fs'); /** ARGUMENTS AND CONFIGUIRATION * expects arguments to be * -w int (width) * -h int (height) * -p int (port) * --url string (url) */ const argv = require('minimist')(process.argv.slice(2)); const windowWidth = argv.w ? argv.w : 1024; const windowHeight = argv.h ? argv.h : 1024; const filename = argv.filename; const filename2 = argv.filename2; const filename3 = argv.filename3; const filename4 = argv.filename4; headless=true const launchConfig = { chromeFlags: [ `--window-size=${windowWidth},${windowHeight}`, '--disable-gpu', headless ? '--headless' : '' ] } //function sleep(ms) { // return new Promise(resolve => setTimeout(resolve, ms)); //} function saveScreenshot(imageData, pageURL) { fs.writeFile( filename, imageData.data, {encoding:'base64'}, (err)=>{ console.warn('error', "1"); } ); } function saveScreenshot2(imageData, pageURL) { fs.writeFile( filename2, imageData.data, {encoding:'base64'}, (err)=>{ console.warn('error', "2"); } ); } function saveScreenshot3(imageData, pageURL) { fs.writeFile( filename3, imageData.data, {encoding:'base64'}, (err)=>{ console.warn('error', "3"); } ); } function saveScreenshot4(imageData, pageURL) { fs.writeFile( filename4, imageData.data, {encoding:'base64'}, (err)=>{ console.warn('error', "4"); } ); } async function launchChrome(headless = true) { return await chromeLauncher.launch(launchConfig); } async function saveScreenShotFromURL(pageURL) { const chrome = await launchChrome(); const protocol = await CDP({port: chrome.port}); const {Page, Runtime} = protocol; await Promise.all([Page.enable(), Runtime.enable()]); Page.navigate({url: pageURL}); Page.loadEventFired(async () => { const screenshot = await Page.captureScreenshot({clip : {x:0,y:0,width : 3100,height : 3030,scale : 1}}); const screenshot2 =await Page.captureScreenshot({clip : {x:0,y:3030,width : 3100,height : 3030,scale : 1}}); const screenshot3 =await Page.captureScreenshot({clip : {x:3100,y:0,width : 3100,height : 3030,scale : 1}}); const screenshot4 = await Page.captureScreenshot({clip : {x:3100,y:3030,width : 3100,height : 3030,scale : 1}}); Promise.resolve( screenshot).then((imageData)=>{ saveScreenshot(imageData,pageURL); }); Promise.resolve( screenshot2).then((imageData)=>{ saveScreenshot2(imageData,pageURL); }); Promise.resolve( screenshot3).then((imageData)=>{ saveScreenshot3(imageData,pageURL); }); Promise.resolve( screenshot4).then((imageData)=>{ saveScreenshot4(imageData,pageURL); }); protocol.close(); chrome.kill(); }); } 

saveScreenShotFromURL（argv.url）如果您知道如何同时打印4个图像，请帮助我。

Answer 2

您发布的脚本定义了sleepfunction，但不会调用它。 如果你等待足够的时间，你会得到页面到所需的状态。

注意：您可以通过await page.waitFor()方法来“睡眠”。

 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('D:\Image_2.HTML', {waitUntil: 'load'}); // wait for 2 seconds await page.waitFor(2000); await page.screenshot({path: 'example.png',fullPage : true}); await browser.close(); })(); 

一般来说，“我的页面加载时”的问题没有很好的答案。 waitUntil选项只是常见的启发式方法，在多种情况下可能会失败。

你的情况很难说出了什么问题。 通常需要了解网页内部的工作情况，才能确定所需的加载状态。