HTML to PDF Converter: How to Save Web Pages as PDF

Last updated: June 2025 · 15 min read

Converting web pages to PDF is one of the most common document tasks in both professional and personal contexts. Whether you're creating invoices, saving articles for offline reading, generating reports, or producing printable documentation, understanding how HTML-to-PDF conversion works — and how to control it — makes a huge difference in output quality.

This guide covers everything from basic browser-based conversion to advanced print CSS techniques, page break control, and professional PDF generation best practices.

Why Convert HTML to PDF?

PDF (Portable Document Format) remains the universal standard for document sharing because it preserves exact layout, fonts, and formatting across all devices and operating systems. Converting HTML to PDF is valuable for:

• Invoices and receipts: Generate professional-looking invoices from HTML templates and deliver them as PDFs via email.
• Reports and documentation: Convert web-based reports to PDF for archiving or distribution.
• Articles and blog posts: Save web content for offline reading with proper formatting.
• Resumes and portfolios: Create printable versions of web-based resumes.
• Legal and compliance documents: Generate timestamped, uneditable versions of web content.
• Archiving: Create snapshots of web pages that preserve the visual layout.

Methods of HTML to PDF Conversion

1. Browser Built-in (Print to PDF)

Every modern browser (Chrome, Firefox, Edge, Safari) can save any web page as PDF using Ctrl+P (Cmd+P on Mac) → "Save as PDF." This uses the browser's built-in rendering engine and supports most CSS features.

Pros: Free, no installation, excellent CSS support, works offline.
Cons: Manual process, no automation, limited batch processing.

2. Online Converters

Web-based tools like our HTML to PDF converter let you paste HTML or enter a URL to generate a PDF. These use server-side headless browsers (typically Chromium) for accurate rendering.

Pros: No software to install, consistent results, accessible from any device.
Cons: Requires internet, may have file size limits, privacy considerations for sensitive content.

3. Command-Line Tools

Developer tools like wkhtmltopdf, Puppeteer (Node.js), and WeasyPrint (Python) offer scriptable conversion with extensive customization options.

Pros: Full control, automatable, batch processing, CI/CD integration.
Cons: Requires technical knowledge, installation and maintenance.

4. Server-Side Libraries

For web applications, libraries like Puppeteer, Playwright, jsPDF, and Prince XML integrate PDF generation directly into your backend.

Print CSS: The Key to Great PDF Output

The single most important technique for high-quality HTML-to-PDF conversion is using print-specific CSS. The @media print query lets you define styles that only apply when the page is printed or saved as PDF.

Basic Print Stylesheet

@media print {
  /* Hide elements that shouldn't appear in PDF */
  nav, footer, .sidebar, .no-print,
  .advertisement, .cookie-banner {
    display: none !important;
  }

  /* Set page margins */
  @page {
    margin: 2cm;
  }

  /* Ensure full-width content */
  body {
    margin: 0;
    padding: 0;
    font-size: 12pt;
    color: #000;
    background: #1a1d2e;
  }

  /* Ensure text is black for printing */
  * {
    color: #000 !important;
  }

  /* Show link URLs */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}

Controlling Page Size and Orientation

@page {
  /* Standard sizes: A4, letter, A3, legal */
  size: A4;

  /* Orientation: portrait or landscape */
  size: A4 landscape;

  /* Custom margins */
  margin: 2cm 1.5cm;

  /* Named pages for different sections */
}

@page cover {
  margin: 0;
  size: A4 portrait;
}

.cover-page {
  page: cover;
}

Page Break Control

Page breaks are crucial for professional PDFs. CSS provides several properties for controlling where pages break:

/* Avoid breaking inside these elements */
h1, h2, h3, h4 {
  page-break-after: avoid;
  break-after: avoid;
}

table, figure, img {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Force page break before major sections */
.chapter {
  page-break-before: always;
  break-before: page;
}

/* Avoid orphan and widow lines */
p {
  orphans: 3;  /* Minimum lines at bottom of page */
  widows: 3;   /* Minimum lines at top of page */
}

Common HTML to PDF Issues and Fixes

1. Missing Web Fonts

Problem: Custom Google Fonts or other web fonts don't appear in the PDF. The converter falls back to system fonts.

Solution: Ensure fonts are fully loaded before conversion. For server-side tools, make sure the server can access the font files. Use @font-face with local fallbacks:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2'),
       url('/fonts/custom.woff') format('woff'),
       local('CustomFont');
  font-weight: normal;
  font-style: normal;
}

2. Background Colors and Images Not Printing

Problem: Browsers often don't print background colors and images by default to save ink. Navigation bars, colored sections, and styled tables appear plain #1a1d2e.

Solution: Users need to enable "Background graphics" in the print dialog. As a developer, avoid relying on backgrounds for critical information — use borders and text colors instead.

3. Fixed Positioning Doesn't Work in PDF

Problem: Elements with position: fixed or position: sticky don't behave as expected in PDF output. They may appear only on the first page or overlap content.

Solution: Override fixed positioning in print styles:

@media print {
  .fixed-header, .sticky-nav {
    position: static !important;
  }
}

4. Content Cut Off at Page Edges

Problem: Wide tables, code blocks, or images extend beyond the page margins and get clipped.

Solution: Use overflow and max-width to constrain content:

@media print {
  pre, code, table, img {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  table {
    font-size: 9pt;
  }
}

5. Links Aren't Clickable in PDF

Problem: Hyperlinks in the PDF aren't clickable.

Solution: Most converters preserve links automatically. Ensure you're using absolute URLs and that the converter supports link preservation. For Chrome's Print to PDF, links are preserved by default.

Advanced PDF Optimization Techniques

Adding Headers and Footers

@page {
  @top-center {
    content: "Confidential Document";
    font-size: 9pt;
    color: #888;
  }
  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 9pt;
  }
  @bottom-right {
    content: "Generated on 2025-06-10";
    font-size: 8pt;
    color: #aaa;
  }
}

Note: Margin box support varies by converter. Chrome supports this via the --header-template and --footer-template flags in headless mode. Prince XML and WeasyPrint have the best support.

Creating a Table of Contents

For multi-page documents, a table of contents with page numbers significantly improves usability:

/* TOC styling */
.toc {
  page-break-after: always;
}
.toc a::after {
  content: leader('.') target-counter(attr(href), page);
}

Image Optimization for PDF

• Use appropriate resolution: 150 DPI for screen-optimized PDFs, 300 DPI for print-quality.
• Compress images: Use WebP or optimized JPEG before embedding. Large images inflate PDF file size dramatically.
• Set explicit dimensions: Always specify width and height on images to prevent layout shifts during conversion.
• Avoid SVG for PDF: Complex SVGs may not render correctly in all PDF converters. Convert SVG to PNG first.

Print CSS Checklist

Before converting any HTML to PDF, make sure your print stylesheet handles these essentials:

Tools Comparison

Frequently Asked Questions

How do I convert HTML to PDF without losing formatting?

Use print-specific CSS (@media print) to control how your page renders in PDF. Set page size, margins, hide navigation elements, control page breaks, and ensure fonts are embedded. Test with browser Print → Save as PDF first, then use an online converter for final output.

What is the best HTML to PDF converter?

For quick conversions, browser's built-in Print to PDF works well. For automated or batch processing, online tools like RiseTop's HTML to PDF converter offer convenience. For programmatic conversion, libraries like Puppeteer, wkhtmltopdf, or Prince XML provide the most control.

How do I add page breaks in HTML to PDF?

Use CSS page-break-before, page-break-after, and page-break-inside properties. For modern browsers, prefer break-before, break-after, and break-inside. Set page-break-inside: avoid on elements you don't want split across pages, and page-break-before: always before major sections.

Why does my PDF look different from the web page?

PDF renderers handle CSS differently than browsers. Common issues: missing web fonts (not embedded), fixed positioning not working, background colors not printing (browser default), and different default margins. Use @media print CSS to address these differences.

Can I convert HTML to PDF with clickable links?

Yes. Most HTML to PDF converters preserve hyperlinks. Ensure your anchor tags use absolute URLs (https://...) rather than relative paths. Some converters also support bookmarks/outline entries generated from heading tags.

Conclusion

Converting HTML to PDF is more than just pressing "Save" — it's about controlling the output to match your intended result. The difference between a sloppy PDF and a professional one comes down to print CSS: hiding unnecessary elements, controlling page breaks, managing fonts, and optimizing layout for paper rather than screens.

Whether you're generating invoices, saving web articles, or creating professional reports, the principles in this guide will help you produce clean, well-formatted PDFs every time. Try our free HTML to PDF converter to see the difference proper formatting makes — or use the print CSS techniques here to optimize your own pages before conversion.