☰

Puppeteerはページが完全に読み込まれるまで待機します 質問する

tag-icon • tag-icon javascript pdf-generation puppeteer google-chrome-headless
Puppeteerはページが完全に読み込まれるまで待機します 質問する

Web ページから 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 を実行できません。

ご協力いただければ幸いです。

ベストアンサー1

使用できます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,
});

おすすめ記事