Maison >interface Web >js tutoriel >Comment générer des PDF à partir d'applications à page unique avec Puppeteer ?

Comment générer des PDF à partir d'applications à page unique avec Puppeteer ?

DDD
DDDoriginal
2024-10-26 09:03:031053parcourir

How to Generate PDFs from Single Page Applications with Puppeteer?

Générer des PDF à partir d'applications à page unique avec Puppeteer

La création d'une application à page unique (SPA) présente des défis lorsqu'il s'agit de générer des PDF, car le le contenu est chargé dynamiquement. Cet article aborde la question de s'assurer que la page est entièrement chargée avant d'exporter un PDF.

Approche :

La clé pour résoudre ce problème réside dans l'attente que la page charger complètement. Au lieu de deviner avec des délais fixes (par exemple, wait page.waitFor(2000);), nous pouvons utiliser la méthode page.waitForNavigation() de Puppeteer.

Mise en œuvre :

Pour attendre que la page se charge avant de générer le PDF, utilisez le code suivant :

<code class="javascript">await page.waitForNavigation({
  waitUntil: 'networkidle0',
});</code>

Cela mettra l'exécution en pause jusqu'à ce que le chargement de la page soit terminé et que toute activité réseau ait cessé.

Considérations supplémentaires :

  • waitForSelector() : S'il y a un élément spécifique qui doit être rendu avant la génération du PDF, envisagez d'utiliser la page .waitForSelector() pour assurer sa visibilité :

    <code class="javascript">await page.waitForSelector('#example', {
      visible: true,
    });</code>
  • waitForNetworkIdle() vs waitForNetworkIdle2() : Puppeteer propose deux variantes de waitUntil : networkidle0 et networkidle2. networkidle0 attend que toutes les requêtes réseau soient terminées, tandis que networkidle2 attend une période plus longue, garantissant que toutes les tâches de post-chargement sont terminées.

Conclusion :

En utilisant page.waitForNavigation() et, éventuellement, page.waitForSelector(), vous pouvez vous assurer que vos PDF sont générés uniquement lorsque la page est complètement chargée, capturant avec précision le contenu dynamique des applications d'une seule page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn