How to Build a Web Page to PDF Converter and Not Lose Your Mind

Source: Dev.to

Save an Article as a PDF – Clean Text Only

Do you ever want to save an article as a PDF without all the extra junk—just clean, selectable text?
Or maybe you only need a specific part of a page, and you want everything on one long page, without page breaks?

I felt the same, so I built my own solution and turned it into a browser extension.

What’s wrong with the standard CTRL + P?

When I save something as a PDF, I want it to look exactly like it does on the screen:

• Clickable links
• The whole document on a single long page (no breaks)

CTRL+P can’t do that. It’s designed for printing on paper, and it simply doesn’t know how to handle the other requirements.

Available Modes in the Extension

1. Full page

• Saves the entire page exactly as you see it.
• Text stays selectable and links remain clickable.
• Not an image with OCR text – it’s a real PDF with real text and real links.

2. Export a page element

• Select a specific element on the page and export only that element.
• Handy for saving just an article, a code block, or any other element.
• I often use this mode when submitting Google Forms so I can keep a copy of the filled‑in data.

3. Article

One of the most interesting modes. It lets you save blog articles in a reader‑friendly view—nothing extra on the page, just the article itself.

In this mode I made sure that:

• Code blocks wrap lines properly.
• “ tags are expanded.

So the entire article content ends up in the PDF.

4. Remove elements

• Click on any element on the page and remove it (e.g., sidebars, menus, ads).
• If you accidentally remove something important, press CTRL + Z to undo.

5. Export chats from ChatGPT, DeepSeek, and Gemini

Since AI companies don’t provide PDF export for chats, I added it to the extension. One click saves the currently open conversation.

Layout options (available in every mode)

• Single‑page PDF – continuous scroll, no breaks.
• Multi‑page PDF – suitable for printing.

You can also adjust the page size to match the screen or standard formats like A4, A5, etc.

How Not to Lose Your Mind

Too many layout variations

Saving websites to PDF is hard. It’s impossible to account for every layout variation—something will always break.

I tried fixing issues site‑by‑site, but that quickly turned into a fight against windmills. Now I only add special fixes for large platforms (e.g., Notion).

Atomic CSS

The massive adoption of atomic CSS frameworks like Tailwind makes reliable element selection difficult.

• Exporting a ChatGPT conversation required a lot of work and tricky selectors just to grab the dialog element.
• With Claude Code I gave up because of the layout.
• Gemini was the easiest—its class names were actually human‑readable.

Lazy‑loading

Lazy‑loaded images are a whole separate pain. For a long page with many images, I use this simple approach to ensure all images load before PDF generation:

for (const img of document.querySelectorAll('img')) {
  img.scrollIntoView();          // trigger loading
  await new Promise(r => setTimeout(r, 100)); // wait ~100 ms
}

If you have a more elegant solution, I’d love to hear it in the comments.

Restoring page styles

The Export page element mode hides everything else on the page except the chosen element, then restores all styles without reloading the page.

Reloading isn’t an option—imagine filling out a long form, hitting “export,” and the page reloads. The rage would be real. I’ve been there.

No documentation

Rendering the final PDF is a story on its own. There are no good libraries for this task.

• PDF.js by Mozilla includes PDFViewer, which sounds great—except there’s basically no documentation.
• You have to figure everything out by reading source code and GitHub issues.
• There are tons of issues asking for documentation, but Mozilla doesn’t want to provide it. Fair enough—thanks for the library, though.

Under the Hood

Here are the main tools I use:

• WXT.dev – a framework for building browser extensions. In my opinion it’s the best option right now: fast HMR, separate browser for testing, great dev speed.
• PDFViewer (PDF.js) – for rendering PDFs.

(The rest of the list was cut off in the original text.)

PDF Generation Options

Generating PDFs from web pages can be tricky. Below are some of the most reliable methods:

• Chrome Debugger – Chrome DevTools Protocol (Page)
  This approach uses the Chrome Debugger to convert pages to PDF. It may sound odd at first, but it delivers the highest quality PDFs.

What’s Next?

I’m continuously adding integrations with popular websites.

For example, I recently introduced one‑click saving for Reddit posts.

• Extension:
  Web to PDF – Chrome Web Store

• Web Service:
  WebToPDF.space – Demo

The web service doesn’t have as many features as the extension, but it works on mobile devices.