DEV Community: PetrDev

Converting a JavaScript-Rendered Web Page to PDF

PetrDev — Sat, 01 Aug 2026 09:58:41 +0000

If you've ever tried to turn a modern web page into a PDF programmatically, you've probably hit the wall: the file comes out blank, half-empty, or frozen on a loading spinner. The page looks perfect in the browser, so what gives?

The answer is timing. Most PDF approaches grab the HTML before the JavaScript has rendered the content. On a server-rendered page that's fine — the markup is already there. On a React/Vue/Angular app, the server sends an near-empty shell and the browser builds the DOM afterward. Capture too early and you save the shell.

Here's how to do it properly.

Why the naive approaches fail

wkhtmltopdf is the classic Google answer. It's fast and it's been around forever, but it uses an ancient WebKit build with effectively no modern JavaScript support. For a static page it's fine. For anything client-rendered, it captures the empty state.

Browser window.print() / Ctrl+P works because it is a real browser — but it's manual, single-page, and impossible to automate cleanly at scale.

Hitting the raw HTML with an HTTP client (axios/fetch then pipe to a PDF lib) has the same fatal flaw as wkhtmltopdf: no JS execution, no rendered content.

What you actually need is a real browser engine that runs the page's JavaScript, waits for it to settle, and then prints. That's Puppeteer.

The Puppeteer approach

Puppeteer drives a headless Chromium. It executes the page exactly like a normal Chrome tab, so whatever renders on screen is what you capture.

const puppeteer = require('puppeteer');

async function pageToPdf(url, outPath) {
  const browser = await puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox'], // needed in most containers
  });
  const page = await browser.newPage();

  await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 });

  await page.pdf({
    path: outPath,
    format: 'A4',
    printBackground: true, // otherwise CSS backgrounds/colors are dropped
    margin: { top: '20px', bottom: '20px', left: '16px', right: '16px' },
  });

  await browser.close();
}

pageToPdf('https://example.com', 'out.pdf');

Two options here matter more than they look:

waitUntil: 'networkidle0' tells Puppeteer to consider navigation finished only when there have been no network connections for 500ms. For most SPAs that's the signal the data has loaded and the DOM is built. (networkidle2 allows up to 2 connections — useful for pages with long-polling or analytics beacons that never fully go quiet.)
printBackground: true — forget this and every background color, gradient, and image disappears, because Chrome's print path strips them by default.

The gotchas that still bite you

Getting a non-blank PDF is step one. Getting a correct one is where the edges show up.

Lazy-loaded content

Images and sections that load on scroll won't be in the PDF, because Puppeteer never scrolled. Force them in by auto-scrolling before you print:

await page.evaluate(async () => {
  await new Promise((resolve) => {
    let y = 0;
    const step = 300;
    const timer = setInterval(() => {
      window.scrollBy(0, step);
      y += step;
      if (y >= document.body.scrollHeight) {
        clearInterval(timer);
        window.scrollTo(0, 0);
        resolve();
      }
    }, 100);
  });
});

Web fonts not loaded yet

Text renders in a fallback font because the web font hadn't finished loading at print time. Wait for it explicitly:

await page.evaluateHandle('document.fonts.ready');

Print CSS overriding your layout

If the site ships a @media print stylesheet, Chrome applies it. Sometimes that's what you want; sometimes it nukes the layout. Force screen rendering with:

await page.emulateMediaType('screen');

Fixed headers repeating or covering content

Sticky/fixed elements can duplicate on every PDF page or overlap the body. The reliable fix is to neutralize them before printing — set their position to static (or hide them) via page.addStyleTag().

When self-hosting Puppeteer isn't worth it

Puppeteer is the right tool when you need PDFs inside a pipeline you control. But it comes with a real operational tail: a headless Chromium is heavy (200MB+), it needs the right system libraries in your container, it leaks memory if you don't manage browser instances carefully, and it falls over under concurrency unless you pool pages and cap parallelism. For a side feature — "let users export this page" — that's a lot of infrastructure to babysit.

If you just need the output and not the plumbing, a hosted service does the same headless-render-then-capture under the hood without the ops burden. I run site2pdf.online for exactly this — it renders each page in real Chrome (so JS content comes through), and it can also follow a site's internal links to capture multiple pages in one pass, exporting to PDF, PNG, or ZIP. Handy when the alternative is standing up and maintaining your own Chromium fleet.

Rule of thumb: if PDF generation is core to your product, self-host Puppeteer and own it. If it's a convenience feature at the edge, offload it.

Wrapping up

The blank-PDF problem is almost always a timing problem: capture happens before JavaScript renders. Use a real browser engine, wait for the network (and fonts) to settle, scroll to trigger lazy content, and enable printBackground. Do that and dynamic pages convert cleanly.

The full, copy-pasteable version of this — plus the fixed-header and multi-page handling — is worth keeping in a snippet somewhere. You'll reach for it more often than you'd expect.

I shipped a website-to-PDF SaaS on WordPress — here's the stack

PetrDev — Tue, 05 May 2026 09:09:28 +0000

Last month I launched Site2PDF — converts any website to PDF, PNG, JPG or ZIP. Here's the entire tech stack, because the choices might be useful if you're building something similar.

What it does

Paste a URL → get a PDF of the whole page (or the whole site). Free plan gives 5 archives/month, all formats, cookie banner removal. Paid starts at $9/mo for 15 archives and 200 pages per site.

The stack

Frontend: a custom WordPress theme. Yes, WordPress. Hear me out.

Native user accounts, sessions, roles
Native admin panel for analytics and user management
Customizer for site branding
Gutenberg-free, just PHP templates + SCSS + vanilla JS

Rendering: Node.js + Puppeteer running on the same VPS, called from PHP via proc_open. A bash-like pattern:

$command = sprintf(
    '%s %s %s %s --options-file %s',
    escapeshellarg($node_path),
    escapeshellarg($script),
    escapeshellarg($url),
    escapeshellarg($output),
    escapeshellarg($options_json)
);
exec($command . ' 2>&1', $output, $code);

PHP passes options (cookie hide, selectors to expand, etc.) as a temp JSON file the Node script reads.

PDF assembly: pdf-lib for multi-page PDFs (each page becomes its own PDF page). DOMPDF for single-page fallback.

Image processing: sharp for PNG→JPG conversion. archiver for ZIP.

Billing: Paddle Billing (started with Stripe, had to migrate — Stripe doesn't support my country). Paddle handles tax, EU VAT, Canadian GST etc. — a huge win for a solo founder.

Auth: Google OAuth 2.0 without any plugin. A REST API endpoint redirects to Google, callback sets a one-time login token, cookie is set on the next regular page load. Why? Because iOS Safari blocks cookies set during REST API redirects (ITP).

Infra: Contabo VPS ($5/mo). Nginx, PHP-FPM, MariaDB. Chrome installed as google-chrome-stable, Puppeteer launches it with executablePath override.

Why WordPress (not Next.js or Rails)

The honest answer: I've shipped WP for 10 years. Familiar tools win. The theme is under 4000 lines of PHP, ~2000 lines of SCSS. I didn't need a full framework for ~5 pages and a wizard UI.

WordPress also gives me:

Zero-effort admin for users, plans, payment history
Free page hierarchy (/pdf-tools/full-page-screenshot/)
Built-in Yoast SEO and Site Icon features

The hot take: WordPress is a perfectly fine backend for a simple SaaS if you disable the bloat and write real code. Most of the "WordPress is slow" complaints come from bloated themes and 40 plugins.

Things that bit me

Puppeteer fullPage + fixed headers — writeup in my other post
Cookie banners blocking the screenshot — had to intercept requests to policy.cookiereports.com before page load
iOS Safari OAuth — first attempt set the auth cookie inside the callback redirect. Safari's ITP killed it. Had to use one-time tokens + set cookie on a regular page navigation.
iCloud Private Relay breaking CSRF state — used IP hash as the state key, which broke when Apple rotates IPs between redirects. Switched to state-as-key.
Paddle sandbox vs production — separate accounts, separate keys, separate price IDs. Wrote a helper that picks the right IDs based on WEBTOOLS_PADDLE_ENV constant.

The architecture in one diagram

Browser (vanilla JS)
  → AJAX → PHP (screenshot-tools.php)
          → proc_open → Node worker (Puppeteer)
          → writes PNG to /uploads/screenshot-temp/
          → PHP assembles PDF/ZIP if needed
          → returns base64 or job ID
  ← polls status / downloads blob

Full-site mode uses a different flow (background worker + status polling). Single-page mode is one synchronous AJAX call.

What's next

Real API (the pricing page still says "API — Soon")
Subscription cancel button in-app (currently "email us")
Blog with the 2-3 dev.to posts ported over for SEO

Try it

site2pdf.online. Free plan doesn't need signup. If you try it and something breaks, the Contact form works.

Happy to answer any questions about the stack in the comments.

Cleaning up web pages for screenshots — a practical Puppeteer guide

PetrDev — Wed, 29 Apr 2026 10:42:41 +0000

If you've ever taken a screenshot of a real-world webpage with Puppeteer, you've seen the ugly truth: cookie banners, sticky headers frozen at weird positions, collapsed FAQ accordions, and "Subscribe!" popups.

Here are four small Puppeteer helpers I use to get clean, presentable screenshots. Each is one function, drop-in ready.

1. Kill cookie banners

async function hideCookieBanners(page, customSelectors = []) {
    await page.evaluate((selectors) => {
        // Known cookie-banner elements
        ['CookieReportsPanel', 'CookieReportsOverlay', 'CookieReportsBannerAZ']
            .forEach(id => document.getElementById(id)?.remove());

        document.querySelectorAll('[class*="wscr"],[id*="CookieReport"]')
            .forEach(el => el.remove());

        // Reset body scroll locks the banner often sets
        document.body.style.overflow = '';
        document.documentElement.style.overflow = '';

        // User-defined selectors (if they know their site)
        selectors.forEach(sel => {
            try {
                document.querySelectorAll(sel).forEach(el => {
                    el.style.setProperty('display', 'none', 'important');
                });
            } catch {}
        });
    }, customSelectors);
}

2. Hide arbitrary elements

async function hideElements(page, selectors) {
    if (!selectors.length) return;
    await page.evaluate(sels => {
        sels.forEach(sel => {
            try {
                document.querySelectorAll(sel).forEach(el => {
                    el.style.setProperty('display', 'none', 'important');
                });
            } catch {}
        });
    }, selectors);
}

Example: hide chat widgets, "cookies" bars, floating "Get started" buttons:

await hideElements(page, [
    '#intercom-container',
    '.crisp-client',
    '[class*="newsletter-popup"]'
]);

3. Unfix sticky headers

Sticky headers repeat on every "screen" of a fullPage screenshot — ugly. Convert them to position: relative:

async function unfixSticky(page, selectors) {
    await page.evaluate(sels => {
        sels.forEach(sel => {
            try {
                document.querySelectorAll(sel).forEach(el => {
                    el.style.setProperty('position', 'relative', 'important');
                    ['top', 'bottom', 'left', 'right', 'z-index']
                        .forEach(p => el.style.setProperty(p, 'auto', 'important'));
                    el.style.setProperty('width', '100%', 'important');
                });
            } catch {}
        });
    }, selectors);
}

4. Expand FAQs / accordions

Most FAQs use classes like _active or attributes like open. Give the function a CSS selector + action + value:

async function expandAccordions(page, pairs) {
    if (!pairs.length) return;
    await page.evaluate(rules => {
        rules.forEach(({ selector, action, value }) => {
            try {
                document.querySelectorAll(selector).forEach(el => {
                    if (action === 'class') {
                        el.classList.add(value || '_active');
                        // Also unhide next sibling (common FAQ pattern)
                        const next = el.nextElementSibling;
                        if (next) {
                            next.style.display = 'block';
                            next.style.maxHeight = 'none';
                            next.removeAttribute('hidden');
                        }
                    } else if (action === 'attribute') {
                        const [name, val = ''] = value.split('=');
                        el.setAttribute(name, val);
                    } else if (action === 'style') {
                        value.split(';').forEach(rule => {
                            const [p, v] = rule.split(':');
                            if (p && v) {
                                el.style.setProperty(p.trim(), v.trim(), 'important');
                            }
                        });
                    }
                });
            } catch {}
        });
    }, pairs);

    // Wait for CSS transitions
    await new Promise(r => setTimeout(r, 400));
}

Example usage:

await expandAccordions(page, [
    { selector: '.faq__question', action: 'class', value: '_active' },
    { selector: 'details', action: 'attribute', value: 'open=true' },
    { selector: '.accordion-body', action: 'style', value: 'display: block' }
]);

Putting it together

await page.goto(url, { waitUntil: 'domcontentloaded' });
await hideCookieBanners(page);
await hideElements(page, ['.chat-widget']);
await unfixSticky(page, ['.sticky-nav']);
await expandAccordions(page, [{ selector: '.faq__q', action: 'class', value: '_open' }]);
await page.screenshot({ path: 'clean.png', fullPage: true });

Where I use this

All four helpers ship in production on Site2PDF — a website-to-PDF tool I'm building. Users paste a URL, tick what to hide/expand, and get a clean archive.

If you're doing any kind of web scraping or automated screenshots, grab these — they'll save you a weekend of CSS archaeology.

Why your fixed header disappears in Puppeteer fullPage screenshots (and how to fix it)

PetrDev — Thu, 23 Apr 2026 15:54:52 +0000

I spent two evenings debugging this. Sharing so you don't have to.

The problem

When you call page.screenshot({ fullPage: true }) on a site with a position: fixed header, one of three things usually happens:

The header renders in the middle of the page (not at the top)
The header area is blank at the top of the PDF/PNG
Only the first page shows the header — subsequent "pages" don't

You open the site in a real browser: looks perfect. You open it in Puppeteer's viewport mode: also fine. Only fullPage: true breaks it.

Why this happens

Puppeteer's fullPage: true uses Chrome DevTools Protocol's captureBeyondViewport. Under the hood, Chrome rasterizes the whole document beyond the viewport — but position: fixed elements are painted relative to the current viewport, not the document. So if your script scrolled to the bottom of the page before taking the screenshot, the fixed header is captured at the bottom.

There's also a second issue: many sites have scroll-behavior: smooth on html. When you call window.scrollTo(0, 0), the scroll is animated and doesn't complete instantly. If Puppeteer captures before the animation finishes, header ends up in a weird intermediate position.

The fix

Three things need to happen before the screenshot:

Kill smooth scrolling so scrollTo is instant
Reset any hide-on-scroll transforms that JS scroll handlers may have applied
Actually scroll to (0, 0) and wait a tick for paint

Here's the code I use in production:

async function prepareForScreenshot(page) {
    await page.evaluate(() => {
        // Disable smooth scrolling — make scrollTo instant
        const style = document.createElement('style');
        style.textContent = 'html { scroll-behavior: auto !important; }';
        document.head.appendChild(style);

        // Reset hide-on-scroll state on common header selectors
        const headers = document.querySelectorAll(
            'header, .header, [class*="header" i], nav[class*="header" i]'
        );
        headers.forEach(el => {
            const cs = window.getComputedStyle(el);
            if (cs.position === 'fixed' || cs.position === 'sticky') {
                el.style.setProperty('transform', 'none', 'important');
                el.style.setProperty('opacity', '1', 'important');
                el.style.setProperty('visibility', 'visible', 'important');
                if (cs.display === 'none') {
                    el.style.setProperty('display', 'flex', 'important');
                }
                // Remove common "hidden on scroll down" classes
                ['hidden', 'is-hidden', 'scroll-up', 'scroll-down', 'header--hidden']
                    .forEach(c => el.classList.remove(c));
            }
        });

        // Scroll to top — now instant
        window.scrollTo(0, 0);
    });

    // Give the browser one paint frame to settle
    await new Promise(r => setTimeout(r, 300));
}

Call it right before page.screenshot:

await prepareForScreenshot(page);
await page.screenshot({ path: 'out.png', fullPage: true });

When the simple fix isn't enough

If the site has a transparent header overlaid on a hero (common modern pattern), the above works great — the header just renders on top of the hero like in a browser.

If the site has a hide-on-scroll JS library that listens to scroll events after your reset, you may need to dispatch a synthetic scroll event to let it re-evaluate:

window.scrollTo(0, 0);
window.dispatchEvent(new Event('scroll'));

What I'm building

I'm working on Site2PDF — a tool that converts any website to PDF, PNG, JPG or ZIP. This exact fix is running in production there. If you want to try it, the free plan is 5 archives/month with all formats and advanced options (cookie banner removal, sticky header unfix, accordion expansion).

Feedback welcome!