How do I save a web page as PDF?

The easiest way is to press Ctrl+P (or Cmd+P on Mac) in your browser and select 'Save as PDF' as the destination. This uses the browser's built-in rendering engine to create a pixel-perfect PDF of the page as it appears on screen.

Can I convert HTML to PDF without losing formatting?

Modern tools like Puppeteer, wkhtmltopdf, and browser-based converters render HTML using the same engines that display it in browsers, so formatting is preserved very accurately. For best results, use @media print CSS rules to control how elements appear in the PDF.

What's the best way to generate PDF invoices from HTML?

Use Puppeteer (Node.js) or WeasyPrint (Python) for server-side generation. These tools render HTML with full CSS support and produce professional-quality PDFs. Create an HTML template with your invoice design, populate it with data, and convert to PDF.

How do I add page breaks in HTML to PDF conversion?

Use CSS page break properties: page-break-before: always; or break-before: page; to force a new page. You can also use page-break-after: avoid; to prevent elements from being split across pages.

Can I convert a live URL to PDF?

Yes. Most tools can fetch and render a URL. With Puppeteer, use page.goto(url) then page.pdf(). Online converters also accept URLs. Note that JavaScript-rendered content (SPAs) requires a headless browser approach like Puppeteer.

HTML to PDF: How to Convert Web Pages to PDF

File Conversion 2026-04-09 By Risetop Team 14 min read

Converting HTML to PDF is one of the most useful skills in a developer's toolkit. Whether you're generating invoices, creating printable reports, archiving web content, or building a documentation system, knowing how to reliably convert HTML to PDF saves time and produces professional results.

This guide covers every major approach: the simple browser method, online converters, and programmatic tools like Puppeteer, wkhtmltopdf, and Python libraries. We'll also dive into CSS for print, which is the secret to getting pixel-perfect results.

Why Convert HTML to PDF?

Invoices and receipts: Generate professional PDF invoices from HTML templates with dynamic data
Reports and dashboards: Export web-based reports as PDFs for sharing and archiving
Documentation: Convert README files, wiki pages, and API docs to PDF format
Archiving web content: Save web pages for offline reading or legal record-keeping
Certificates and badges: Generate personalized PDF certificates from templates
Email attachments: Convert HTML email templates to PDF for clients that can't render HTML

Method 1: Browser Print (Simplest)

Every modern browser can save any web page as a PDF. This is the quickest method and requires no tools:

Navigate to the web page you want to convert
Press Ctrl+P (Windows/Linux) or Cmd+P (macOS)
In the print dialog, change the destination to "Save as PDF"
Adjust settings (layout, margins, pages)
Click Save

💡 Pro tip: For the best results, use Chrome or Edge (both Chromium-based). They use the same rendering engine as Puppeteer, so the output is consistent. Firefox produces slightly different results due to its different PDF rendering.

Browser Print Settings That Matter

Margins: "None" for full-bleed designs, "Default" for standard documents
Headers and footers: Uncheck to remove page numbers and URLs
Background graphics: Enable to preserve background colors and images
Layout: Portrait vs. landscape — auto-detected by @page CSS if set
Scale: Default (100%) works best; adjust only for specific layout issues

Method 2: Online HTML to PDF Converters

Online converters work when you need to convert a URL or HTML snippet without installing anything:

Visit the HTML to PDF converter
Paste your HTML code or enter a URL
Click convert and download the PDF

This approach is ideal for quick conversions, testing how your HTML will look as a PDF, or when you're working on a device where you can't install software.

Convert HTML to PDF right in your browser — no signup, no server upload.

Try HTML to PDF Converter →

Method 3: Puppeteer (Best for Node.js)

Puppeteer is the gold standard for HTML-to-PDF conversion. It's a Node.js library that controls a headless Chrome browser, meaning it renders HTML exactly as Chrome does — complete with CSS Grid, Flexbox, web fonts, and JavaScript execution.

Basic Conversion

This was generated from HTML.

', 'output.pdf');

Convert a URL to PDF

async function urlToPdf(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.pdf({
    path: outputPath,
    format: 'Letter',
    printBackground: true
  });

  await browser.close();
}

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

Advanced Puppeteer Options

await page.pdf({
  path: 'report.pdf',
  format: 'A4',              // Paper size
  landscape: false,           // Orientation
  printBackground: true,      // Include backgrounds
  scale: 1,                   // Zoom factor
  margin: {
    top: '25mm',
    right: '20mm',
    bottom: '25mm',
    left: '20mm'
  },
  pageRanges: '1-5',          // Specific pages
  displayHeaderFooter: true,
  headerTemplate: 'Monthly Report - 2026
',
  footerTemplate: 'Page  of 
'
});

💡 Pro tip: Use waitUntil: 'networkidle0' to ensure all resources (images, fonts, async content) are fully loaded before generating the PDF. This prevents missing images and incomplete layouts.

Method 4: wkhtmltopdf

wkhtmltopdf uses the WebKit rendering engine to convert HTML to PDF. While older than Puppeteer, it's still widely used and very fast:

# Install
sudo apt install wkhtmltopdf
brew install wkhtmltopdf

# Basic conversion
wkhtmltopdf input.html output.pdf

# From URL
wkhtmltopdf https://example.com output.pdf

# With options
wkhtmltopdf --page-size A4 --margin-top 20mm \
  --orientation Portrait --enable-local-file-access \
  input.html output.pdf

wkhtmltopdf vs Puppeteer

Puppeteer uses current Chrome — better CSS support, more accurate rendering, handles modern web features
wkhtmltopdf is faster and lighter — good for simple HTML, but uses an older WebKit engine with some CSS limitations
For new projects, Puppeteer is the recommended choice

Method 5: Python Libraries

WeasyPrint (Recommended)

WeasyPrint is a Python library that converts HTML and CSS to PDF. It has excellent CSS support, including CSS Paged Media for precise print layout control:

from weasyprint import HTML # From HTML string HTML(string='<

Amount: $500.00

').write_pdf('invoice.pdf') # From URL HTML(url='https://example.com').write_pdf('page.pdf') # From local file HTML(filename='report.html').write_pdf('report.pdf')

pdfkit (Python wrapper for wkhtmltopdf)

import pdfkit

options = {
    'page-size': 'A4',
    'margin-top': '20mm',
    'margin-right': '15mm',
    'margin-bottom': '20mm',
    'margin-left': '15mm',
    'encoding': 'UTF-8',
    'enable-local-file-access': None
}

pdfkit.from_file('report.html', 'report.pdf', options=options)
pdfkit.from_url('https://example.com', 'example.pdf', options=options)
pdfkit.from_string('', 'hello.pdf', options=options)

xhtml2pdf

from xhtml2pdf import pisa

html = open('template.html').read()
with open('output.pdf', 'wb') as f:
    pisa.CreatePDF(html, dest=f)

Test your HTML as a PDF instantly — paste your code and see the result.

HTML to PDF Online →

CSS for Print: The Key to Perfect PDFs

The most common problem with HTML-to-PDF conversion is that the PDF doesn't look right. The fix is almost always CSS. Here's how to control your PDF output:

@page Rules

@page {
  size: A4;
  margin: 25mm 20mm;
}

@page :first {
  margin-top: 0;  /* No margin on first page */
}

@page landscape {
  size: A4 landscape;
}

/* Apply landscape to specific elements */
.chart-section { page: landscape; }

Page Breaks

/* Force a page break before this element */
h2.chapter-title {
  page-break-before: always;
  break-before: page; /* Modern syntax */
}

/* Prevent element from being split across pages */
table, img {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Avoid page break right after */
h3 {
  page-break-after: avoid;
  break-after: avoid;
}

/* Keep related elements together */
.KeepTogether {
  page-break-inside: avoid;
}

Print-Specific Styling

@media print {
  /* Hide navigation, ads, and interactive elements */
  nav, .sidebar, .ad-banner, .no-print {
    display: none !important;
  }

  /* Ensure body takes full width */
  body {
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

  /* Prevent links from showing URLs */
  a[href]:after {
    content: none;
  }

  /* Ensure backgrounds print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

Common Problems and Solutions

Missing images: Use absolute URLs or base64-encode images. For local files, ensure the tool has file access enabled.
Fonts look different: Embed web fonts using @font-face with base64 or ensure the fonts are loaded before conversion.
Page breaks in wrong places: Use CSS page-break properties to control where pages split.
Content cut off at page edges: Adjust margins and use overflow: hidden with caution — it can clip content.
JavaScript not executed: Only browser-based tools (Puppeteer, browser print) execute JavaScript. wkhtmltopdf and WeasyPrint do not.

Conclusion

HTML to PDF conversion is a well-solved problem with excellent tools at every level. For quick one-off conversions, online converters or browser print work perfectly. For production applications generating invoices, reports, or certificates, Puppeteer (Node.js) or WeasyPrint (Python) provide the control and reliability you need.

The key to professional results is CSS for print. Invest time in your @media print styles and @page rules, and your PDFs will look polished and consistent every time.