我正在通过网页创建PDF。
我正在处理的应用程序是单页应用程序。
我在https://github.com/GoogleChrome/puppeteer/issues/1412上尝试了多种选择和建议
但是它不起作用
const browser = await puppeteer.launch({
executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
ignoreHTTPSErrors: true,
headless: true,
devtools: false,
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
const page = await browser.newPage();
await page.goto(fullUrl, {
waitUntil: 'networkidle2'
});
await page.type('#username', 'scott');
await page.type('#password', 'tiger');
await page.click('#Login_Button');
await page.waitFor(2000);
await page.pdf({
path: outputFileName,
displayHeaderFooter: true,
headerTemplate: '',
footerTemplate: '',
printBackground: true,
format: 'A4'
});
我想要的是在页面完全加载后立即生成PDF报告。
我不想写任何类型的延迟,即await page.waitFor(2000);
我无法使用waitForSelector,因为该页面具有在计算后呈现的图表。
我们将不胜感激。
答案 0 :(得分:15)
有时networkidle
事件并不总是表明页面已完全加载。仍然可能有一些 JS scripts
修改页面上的内容。因此,观察浏览器对HTML
源代码修改的完成似乎会产生更好的结果。这是您可以使用的功能-
const waitTillHTMLRendered = async (page, timeout = 30000) => {
const checkDurationMsecs = 1000;
const maxChecks = timeout / checkDurationMsecs;
let lastHTMLSize = 0;
let checkCounts = 1;
let countStableSizeIterations = 0;
const minStableSizeIterations = 3;
while(checkCounts++ <= maxChecks){
let html = await page.content();
let currentHTMLSize = html.length;
let bodyHTMLSize = await page.evaluate(() => document.body.innerHTML.length);
console.log('last: ', lastHTMLSize, ' <> curr: ', currentHTMLSize, " body html size: ", bodyHTMLSize);
if(lastHTMLSize != 0 && currentHTMLSize == lastHTMLSize)
countStableSizeIterations++;
else
countStableSizeIterations = 0; //reset the counter
if(countStableSizeIterations >= minStableSizeIterations) {
console.log("Page rendered fully..");
break;
}
lastHTMLSize = currentHTMLSize;
await page.waitFor(checkDurationMsecs);
}
};
您可以在页面load
/ click
函数调用之后和处理页面内容之前使用此功能。例如
await page.goto(url, {'timeout': 10000, 'waitUntil':'load'});
await waitTillHTMLRendered(page)
const data = await page.content()
答案 1 :(得分:6)
在最新的Puppeteer版本中,networkidle2
为我工作:
await page.goto(url, { waitUntil: 'networkidle2' });
答案 2 :(得分:5)
您可以使用page.waitForNavigation()
等待新页面完全加载,然后再生成PDF:
await page.goto(fullUrl, {
waitUntil: 'networkidle0',
});
await page.type('#username', 'scott');
await page.type('#password', 'tiger');
await page.click('#Login_Button');
await page.waitForNavigation({
waitUntil: 'networkidle0',
});
await page.pdf({
path: outputFileName,
displayHeaderFooter: true,
headerTemplate: '',
footerTemplate: '',
printBackground: true,
format: 'A4',
});
如果要动态生成某些要包含在PDF中的元素,请考虑使用page.waitForSelector()
以确保内容可见:
await page.waitForSelector('#example', {
visible: true,
});
答案 3 :(得分:5)
在某些情况下,对我来说最好的解决方案是:
await page.goto(url, { waitUntil: 'domcontentloaded' });
答案 4 :(得分:4)
答案 5 :(得分:2)
我总是喜欢等待选择器,因为许多选择器可以很好地指示页面已完全加载:
if (item.Value is object)
答案 6 :(得分:1)
将page.click
和page.waitForNavigation
包装在Promise中。全部
await Promise.all([
page.click('#submit_button'),
page.waitForNavigation({ waitUntil: 'networkidle0' })
]);
答案 7 :(得分:0)
自2020年12月起,不推荐使用waitFor
函数,因为代码中的警告告诉您:
waitFor已过时,将在以后的版本中删除。看到 Neo4j Bloom了解详细信息以及如何 迁移代码。
您可以使用:
sleep(millisecondsCount) {
if (!millisecondsCount) {
return;
}
return new Promise(resolve => setTimeout(resolve, millisecondsCount)).catch();
}
并使用它:
(async () => {
await sleep(1000);
})();
答案 8 :(得分:0)
我在处理离屏渲染器时遇到了与 networkidle
相同的问题。我需要一个基于 WebGL 的引擎来完成渲染,然后才制作屏幕截图。对我有用的是 page.waitForFunction() 方法。在我的情况下,用法如下:
await page.goto(url);
await page.waitForFunction("renderingCompleted === true")
const imageBuffer = await page.screenshot({});
在渲染代码中,我只是在完成后将 renderingCompleted
变量设置为 true。如果您无权访问页面代码,则可以使用其他一些现有标识符。