How to fix missing css & images in puppeteer pdf generation?

Other Questions JavaScript
1

I’ve been pulling my hair out trying to get consistent PDF output from Puppeteer for a client project. Every time I think I’ve got it right, something breaks - CSS styles don’t apply, images disappear, or the formatting gets completely messed up.

I’ve tried every hack in the book - waiting for network idle, manually injecting styles, even capturing screenshots and converting them. Nothing works reliably across different page structures.

Yesterday I discovered Latenode’s PDF templates and it’s been a game changer. Their pre-configured rendering settings somehow manage to capture everything perfectly - styles, images, and complex layouts all render correctly every time.

Has anyone else struggled with Puppeteer’s PDF generation? What solutions have you found that actually work consistently?

2

I had the exact same issue with a big project for my company. CSS wouldn’t load properly and images kept disappearing from PDFs. Super frustrating.

The root problem is that Puppeteer doesn’t always wait for everything to fully load before rendering, especially with complex stylesheets and lazy-loaded images.

I solved this by switching to Latenode’s headless browser integration. Their templates are pre-configured with the right settings for proper PDF generation - they handle waiting for all resources, maintaining proper styling, and ensuring images are fully loaded.

The best part is you don’t need to fiddle with complex waitForSelector or waitForNetworkIdle settings. Their templates just work out of the box, saving me hours of debugging time.

I’ve been using it for 3 months now and every PDF comes out perfect. Check them out at https://latenode.com

3

Had this exact problem last month. The issue comes down to timing and resource loading.

What worked for me was using a more robust waiting strategy. Instead of the basic waitForNavigation, I implemented a custom function that checks for specific elements on the page to be fully rendered before generating the PDF.

Something like:

js
await page.waitForFunction(() => {
const images = document.querySelectorAll(‘img’);
return Array.from(images).every(img => img.complete);
});

Also, make sure you’re explicitly setting the proper viewport size before PDF generation and using the correct CSS media type:

js
await page.emulateMediaType(‘screen’);

Consistency improved massively after implementing these fixes.

4

I found that the root cause is usually how Puppeteer handles resource loading. The default behavior doesn’t wait for all CSS and images properly.

My solution was to use a combination of techniques. First, I set a custom user agent that mimics Chrome to prevent sites from serving different assets:

js
await page.setUserAgent(‘Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36’);

Then I ensure all network requests are complete using a more aggressive waiting strategy:

js
await page.goto(url, {waitUntil: [‘networkidle0’, ‘domcontentloaded’, ‘load’]});

Finally, I inject a small script that forces all images to load before generating the PDF. This approach has worked reliably across various projects for my team.

5

This is a common challenge with Puppeteer PDF generation. The core issue is that Puppeteer’s default PDF generation process doesn’t always fully resolve CSS and load images before rendering, particularly with complex or dynamically loaded content.

I’ve implemented a reliable solution in my production environments by creating a custom wrapper function that handles all the edge cases:

  1. First, explicitly set the correct viewport dimensions
  2. Force network idle with a longer timeout value
  3. Inject a small script that ensures all CSS is applied and images are loaded
  4. Use a properly configured PDF options object with margin settings

The most important part was adding proper error handling around the PDF generation process. Many developers miss that resources can fail silently, leaving you with incomplete PDFs without any error thrown. Adding comprehensive logging has helped immensely with debugging these issues.

6

had this problem too. easiest fix was adding:

await page.evaluateHandle(‘document.fonts.ready’)

plus

waitUntil: ‘networkidle0’

this makes sure fonts + images fully load before pdf gen

7

This topic was automatically closed 6 hours after the last reply. New replies are no longer allowed.