Setting up Puppeteer to generate PDFs with complete CSS styling and image rendering

[SwiftCoder15]

I’m having trouble getting Puppeteer to generate PDFs that include all the images and CSS styles from web pages. When I create a PDF using the pdf() method, some images don’t appear and certain styles are missing from the output.

I’ve tried using waitForNavigation() but it doesn’t seem to help. The weird thing is that when I use screenshot() instead of pdf(), everything renders perfectly with all images and styles intact.

Here’s my current setup:

• Node.js version 8.5.0
• Puppeteer version 0.10.2

const puppeteer = require('puppeteer');
const targetUrl = 'https://example-marketplace.com/categories/tools';

(async () => {
  const browserInstance = await puppeteer.launch();
  const webPage = await browserInstance.newPage();
  await webPage.goto(targetUrl);
  await webPage.waitForNavigation({
    timeout: 120000, 
    waitUntil: 'networkidle', 
    networkIdleTimeout: 3000
  });
  await webPage.pdf({path: 'output.pdf'});
  
  // This alternative works fine:
  // await webPage.screenshot({fullPage: true, path: 'output.png'});
  
  await browserInstance.close();
})();

What configuration options should I use to ensure PDFs include all visual elements?

[alexj]

try adding await webPage.waitForTimeout(2000) before the pdf call. images sometimes need extra time to load even after networkidle. also, check if your CSS has print media queries hiding stuff in pdf mode.

[Grace_31Dance]

Your problem is PDF rendering in Puppeteer handles media differently than what you see in the browser. I hit this exact issue when generating dashboard reports. Add await webPage.emulateMediaType('screen') before your PDF call - it forces screen CSS instead of print CSS. Most sites have print stylesheets that hide background images and mess with layouts. Also set preferCSSPageSize: true in your PDF options to keep the original styling. What really saved me was using waitForFunction with a custom condition for specific images instead of just relying on networkidle. Your versions are pretty outdated though - newer releases have way better resource loading for PDFs.

[charlottew]

This happens because Puppeteer’s PDF engine handles resources differently than screenshots. Your Node.js and Puppeteer versions are pretty old, which makes these rendering issues worse. I had the same problem generating invoices and fixed it by adding waitUntil: ['networkidle0', 'domcontentloaded'] as an array - this makes sure everything loads first. Also add printBackground: true to your PDF options since CSS backgrounds and images are turned off by default in PDF mode. You can drop the waitForNavigation after goto - it’s redundant since goto already waits. Definitely upgrade to newer versions though - PDF generation got way better in recent Puppeteer releases.