Heim >Web-Frontend >js-Tutorial >Wie erstelle ich mit Puppeteer PDFs aus einseitigen Anwendungen?

Wie erstelle ich mit Puppeteer PDFs aus einseitigen Anwendungen?

DDD
DDDOriginal
2024-10-26 09:03:031062Durchsuche

How to Generate PDFs from Single Page Applications with Puppeteer?

Generieren von PDFs aus Single-Page-Anwendungen mit Puppeteer

Das Erstellen einer Single-Page-Anwendung (SPA) stellt Herausforderungen dar, wenn es um die Generierung von PDFs geht, da die Inhalte werden dynamisch geladen. In diesem Artikel geht es darum, sicherzustellen, dass die Seite vollständig geladen ist, bevor eine PDF-Datei exportiert wird.

Ansatz:

Der Schlüssel zur Lösung dieses Problems liegt darin, darauf zu warten, dass die Seite geladen wird vollständig laden. Anstatt mit festen Verzögerungen zu schätzen (z. B. wait page.waitFor(2000);), können wir die page.waitForNavigation()-Methode von Puppeteer verwenden.

Implementierung:

Um zu warten, bis die Seite geladen ist, bevor Sie das PDF generieren, verwenden Sie den folgenden Code:

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

Dadurch wird die Ausführung angehalten, bis der Ladevorgang der Seite abgeschlossen ist und alle Netzwerkaktivitäten beendet sind.

Zusätzliche Überlegungen:

  • waitForSelector(): Wenn ein bestimmtes Element gerendert werden muss, bevor das PDF generiert wird, sollten Sie die Verwendung von page in Betracht ziehen .waitForSelector(), um die Sichtbarkeit sicherzustellen:

    <code class="javascript">await page.waitForSelector('#example', {
      visible: true,
    });</code>
  • waitForNetworkIdle() vs. waitForNetworkIdle2(): Puppeteer bietet zwei Varianten von waitUntil: networkidle0 und networkidle2. networkidle0 wartet darauf, dass alle Netzwerkanforderungen abgeschlossen sind, während networkidle2 einen längeren Zeitraum wartet, um sicherzustellen, dass alle Aufgaben nach dem Laden erledigt sind.

Fazit:

Durch die Verwendung von page.waitForNavigation() und optional page.waitForSelector() können Sie sicherstellen, dass Ihre PDFs nur generiert werden, wenn die Seite vollständig geladen ist, und so den dynamischen Inhalt von Einzelseitenanwendungen genau erfassen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Puppeteer PDFs aus einseitigen Anwendungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn