[解決済み] ページが完全に読み込まれるまで、Puppeteerは待機する
2023-06-22 21:11:37
質問
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を使用することはできません。
ヘルプは感謝されるでしょう。
どのように解決するのですか?
あなたは
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,
});
関連
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] Node.jsを完全にアンインストールして、最初から再インストールする方法 (Mac OS X)
-
[解決済み] jQuery の Ajax リクエストがすべて終了するまで待ちますか?
-
[解決済み】一部の約束が拒否されても、すべての約束が完了するまで待つ
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] これは純関数ですか?