Puppeteer waitUntil Options

Do you need to convert HTML to PDFs or images while retaining the highest quality? Look no further than cloudlayer.io, a service that uses a customized version of Puppeteer to render HTML and websites for high-fidelity results. In this blog post, we'll discuss the best way to ensure your content is fully loaded before outputting it as a PDF or an Image using Puppeteer.

Why Puppeteer and Chrome for HTML conversion?

At cloudlayer.io, we've chosen Puppeteer and a headless version of Chrome for our conversion service because of their unparalleled performance, resilience, scalability, and customization capabilities. Puppeteer excels at rendering even the most complex HTML, Javascript, and CSS, ensuring the highest quality conversion results.

Dealing with content loading challenges

• load - navigation is finished when the load event is fired.
• domcontentloaded - navigation is finished when the DOMContentLoaded event is fired.
• networkidle0 - navigation is finished when there are no more than 0 network connections for at least 500 ms.
• networkidle2 - navigation is finished when there are no more than 2 network connections for at least 500 ms.

Choosing the right waitUntil option

• networkidle0 is best suited for SPA-based applications or applications that close connections when finished, such as those using fetch requests.
• networkidle2is ideal for pages using streams or long-lived connections, like polling or background tasks involving network connections.

Addressing common edge cases

Some edge cases require additional workarounds, such as:

1. Lazy-loaded images
2. Lazy-loaded content based on scrolling position
3. Videos or animated content

To address these edge cases, you can use the following techniques:

• For lazy-loaded images and content, simulate scrolling the page to the end and then render the result. Combine this approach with networkidle0 or networkidle2 for optimal results. Be cautious with infinitely scrolling sites, as excessively large renderings may cause memory exceptions. Implement techniques to prevent this or consider using cloudlayer.io, where we've already addressed these challenges.

Example: If you are using cloudlayer.io we have a feature called autoScroll which will simulate scrolling the page, which triggers lazy-loaded elements to render. Combine autoScroll with networkidle0 or networkidle2 for the best results, although there's no guarantee due to varying scenarios.

Conclusion

Puppeteer and Chrome offer a powerful and versatile solution for converting HTML to PDFs and images while ensuring high-fidelity results. By understanding the various waitUntil options and addressing common edge cases, you can achieve complete content loading for your conversion needs.

Try cloudlayer.io today

Now that you know how to use these options, sign up for a free account at cloudlayer.io and start using our Puppeteer-backed API endpoints for your HTML to PDF and image conversion needs. Our service handles all the intricacies for you, so you can focus on delivering exceptional content.

Related Blogs

Learn How to Automate your PDF Generation Process

Using our service you can automate the generation of PDF documents such as invoices, receipts, and more. In this article, we explain how to use our API and Zapier Integrations for generating dynamic PDF documents.

cloudlayer.io blog - Read about automated document generation.Eric

Learn How to use HTML to Generate Dynamic Images

Find out how to use HTML to generate rich images with useful things like graphs, QRCodes, dynamic text, and more.

cloudlayer.io blog - Read about automated document generation.Eric

Using the Puppeteer Header Template with Images and Styles

Learn how to use Puppeteer header templates and how we customized them with our service to make it easier and more feature rich.

cloudlayer.io blog - Read about automated document generation.Eric