Why your PDFs from JavaScript pages are blank — and how to fix it
If you’ve ever tried to convert a React or Vue page to PDF and ended up with a blank sheet, the issue isn’t your tool—it’s the timing. Most libraries grab HTML before JavaScript renders the content, leaving only the empty shell. The fix is to use a real browser engine that waits for everything to settle.
## The real culprit: static tools vs. dynamic pages
Classic tools like wkhtmltopdf rely on an old WebKit build with near-zero JavaScript support. They work fine for server-rendered pages, but client-side frameworks build the DOM after the initial markup arrives. Capturing the raw HTML with axios or fetch yields the same empty result because neither executes JavaScript. Only a headless browser that renders the page exactly as a user sees it can produce an accurate PDF.
## Puppeteer to the rescue
Puppeteer drives a real Chromium instance, runs all scripts, waits for network quiescence, and then prints the page. A minimal script sets two critical options: waitUntil: 'networkidle0' tells Puppeteer to proceed only when the network has been idle for 500 ms, ensuring data and DOM are ready. Setting printBackground: true preserves backgrounds and colors that Chrome’s print engine otherwise drops.
const puppeteer = require('puppeteer');
async function pageToPdf(url, outPath) { const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }); const page = await browser.newPage(); await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 }); await page.pdf({ path: outPath, format: 'A4', printBackground: true, margin: { top: '20px', bottom: '20px', left: '16px', right: '16px' } }); await browser.close(); }
## Edge cases that still break the PDF
Lazy-loaded images and sections only appear once you scroll. Puppeteer won’t trigger scroll events by default, so you must auto-scroll to the bottom before printing. Web fonts can also cause fallback rendering; wait explicitly for document.fonts.ready. Finally, print-specific CSS may override your layout—testing and tweaking the print stylesheet is often necessary.
For a quick online solution without code, you can try site2pdf.online as a lightweight fallback, though automation at scale still demands Puppeteer.
Why it matters
Manual printouts or static tools fail on modern SPAs because they capture the skeleton before JavaScript awakens it. Using a headless browser that waits for the real page state ensures PDFs match what users see, which is critical for reporting, archiving, and regulatory documents. The small investment in Puppeteer scripts pays off in accuracy and automation across thousands of pages.
Source: DEV Community. AI-assisted editorial synthesis — TechnoExpress.