How to Preserve Links and Formatting When Saving a Webpage as PDF

A PDF with dead links is a less useful document than the original webpage. For research articles, documentation, or any content where the citations and references matter, losing the hyperlinks in conversion defeats part of the purpose of saving the file.

Formatting fidelity is the other half of the problem. A PDF that reformats tables into unreadable line noise, loses the article's hierarchy, or renders custom fonts as generic fallbacks is harder to use than it should be.

Here's what actually controls link and formatting preservation — and what you can do to improve both.

Why Links Disappear (or Break) in PDFs

Absolute vs relative URLs

An absolute URL — https://example.com/article — is self-contained. Chrome's PDF renderer keeps it as a clickable link because it has everything it needs. A relative URL — /about or #section-3 — depends on the domain context of the original page. In a PDF, that context doesn't exist. Chrome may convert it to a dead link or omit it entirely.

JavaScript navigation

Many modern sites use JavaScript to handle navigation: <a href="#" onClick="navigate('page')">. When rendered to PDF, the href value is # (which points to nowhere), so the link doesn't work. The JavaScript onClick handler is ignored in PDF output. These pseudo-links will never work in a PDF regardless of which method you use.

Screenshot-based capture

Any PDF generated from a screenshot image rather than from HTML text directly loses all link data. The text is rasterized — it's pixel data, not character data with attributes. Nothing is clickable.

Checking What's Preserved Before Saving

The fastest way to evaluate link preservation is to use Chrome's print preview. Before clicking Save:

1. Press Ctrl+P.
2. In the preview, hover over text that you know is a hyperlink on the original page.
3. If a URL appears in the browser's status bar, the link will be preserved in the PDF.
4. If nothing appears, the link won't survive the conversion.

Method 1 — Chrome Print-to-PDF (Reliable for Absolute Links)

For most standard web articles and documentation pages, Chrome's native print preserves absolute links reliably:

1. Press Ctrl+P.
2. Select Save as PDF.
3. Under More settings, make sure Background graphics is checked (this helps with layout fidelity).
4. Verify links in the preview as above.
5. Save.

For a full walkthrough of Chrome's print settings — margins, background graphics, scale — saving a webpage as PDF in Chrome covers all the relevant options.

Method 2 — PrintFriendly (Best for Clean Articles with Working Links)

PrintFriendly processes the page's HTML directly, extracting the content layer and building a PDF from the underlying structure rather than from a visual screenshot. This approach preserves absolute links well and often handles anchor-linked footnotes too. For long-form articles where you want both clean formatting and working links, PrintFriendly is the most practical combination. It pairs well with the techniques for producing clean PDFs from long articles.

Method 3 — Puppeteer / Headless Chrome (For Developers)

For programmatic PDF generation where link preservation must be reliable, Puppeteer gives full control:

const puppeteer = require('puppeteer');

async function saveToPDF(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.pdf({
    path: outputPath,
    format: 'A4',
    printBackground: true,
    margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' }
  });
  await browser.close();
}

Puppeteer uses the same Chromium rendering engine as Chrome, so it preserves links the same way Chrome does — absolute links work, relative links may not. The advantage is reproducibility and scriptability for multi-page PDF workflows.

Preserving Formatting

Fonts

Web fonts load via CSS @font-face. Chrome's print-to-PDF embeds loaded fonts in the output, so if fonts have loaded on the page before you print, they appear in the PDF. If the page is slow to load fonts, wait a few seconds after the page fully loads before opening the print dialog.

Tables

HTML tables render well in PDF when they use semantic table markup (<table>, <thead>, <tbody>). CSS grid and flexbox-based "tables" often break in print mode because they rely on viewport-based sizing. For structured data tables, a dedicated extension often performs better than the native print.

Headers and hierarchy

Heading hierarchy (<h1> through <h6>) is preserved in the PDF if the page uses semantic HTML. Heading styling may change because print CSS often defines different heading styles from screen CSS.

Images

Images are included if Background graphics is enabled, the images have loaded before printing, and the images are <img> elements (not CSS background images, which require Background graphics enabled).

Color and backgrounds

Background colors and images require Background graphics to be enabled. With it off, backgrounds print white — good for ink saving, bad for fidelity.

When Formatting Breaks Badly

For pages where the PDF output is genuinely unacceptable — layouts that completely collapse, text running off the page, missing sections — the best approaches are:

1. Use SingleFile to save the page as HTML, then open and print — this preserves the page's full styling context.
2. Use GoFullPage which renders a visual screenshot rather than relying on print CSS — fidelity is excellent because it captures what you see on screen.

For comparing the output quality of the native print versus extensions, there are specific scenarios where the screenshot-based approach trades off link preservation for layout fidelity.

Final Thoughts

Link and formatting preservation in PDFs comes down to the method. Text-based conversion (Chrome print, PrintFriendly, Puppeteer) preserves links but depends on print CSS for formatting. Screenshot-based conversion (GoFullPage PNG, Nimbus Screenshot) preserves visual formatting but loses link interactivity. For most research and reference documents, the text-based approach is the right default.

Frequently Asked Questions

Does Chrome print-to-PDF preserve hyperlinks?

Yes, for absolute URLs (https://). Relative links and JavaScript navigation links are generally not preserved.

Why are my links not clickable in the PDF?

Either the PDF was generated from a screenshot, the links use JavaScript navigation, or the PDF viewer doesn't support interactive links.

How do I check if links are preserved before saving?

In Chrome's print preview, hover over link text. If a URL appears in the status bar, it will be preserved. If nothing appears, it won't.

Do extensions preserve links better than Chrome's native print?

Often yes for absolute links. Text-based extensions process HTML directly and maintain anchor tags reliably. Screenshot-based tools preserve no links.

Can I add links to a PDF that doesn't have them?

Yes, using Adobe Acrobat's Link tool (Edit PDF > Link). For many links, it's faster to reconvert using a method that preserves links natively.