DEV Community

Cover image for How to Convert HTML to PDF in 3 Easy Ways
Liam Turner
Liam Turner

Posted on

How to Convert HTML to PDF in 3 Easy Ways

Converting HTML to PDF is a surprisingly common task. Whether you want to save a web page for offline reading, generate reports, or automate document creation, knowing the easiest ways to convert HTML to PDF can save you a lot of time. In this post, we’ll cover three simple methods that anyone can use from beginner to developer.

Method 1: Browser “Print to PDF”

Most modern browsers have a built-in Print to PDF feature. This is the easiest way if you just want a quick conversion.

How to convert HTML to PDF in browser

  1. Open the HTML page in your browser (Chrome, Firefox, or Edge).
  2. Press Ctrl + P (Windows) or Cmd + P (Mac) to open print dialog.
  3. Select “Save as PDF” or “Microsoft Print to PDF” as the printer.
  4. Adjust settings like layout, margins, and background graphics.
  5. Click Save and choose the destination folder.

Method 2: Online Free Tools

There are many online HTML to PDF converters. These tools often offer more options and flexibility than the browser method, such as custom page sizes, layout adjustments, headers and footers, and advanced formatting features. Check out the example websites below:

How to convert HTML to PDF online

  • Visit the website of the tool you want to use.
  • Paste the URL of the page to convert, or upload your HTML file.
  • Choose any available options such as page size,layout etc
  • Click the convert/download button to generate your PDF.
  • Save the resulting PDF to your computer.

Method 3: Automate HTML to PDF Conversion

For developers who need to convert HTML to PDF regularly or in bulk, automation is the best approach. You can use Node.js with Puppeteer as one example, but the same approach works in Python, PHP, Ruby, or any language that can render HTML and generate PDFs.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle0' });
  await page.pdf({
    path: 'page.pdf',
    format: 'A4',
    printBackground: true
  });
  await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

Tips for Preserving Styling and Images when converting HTML to PDF

  • Always enable background graphics if using browser or Puppeteer.

  • For offline HTML files, make sure CSS and images are accessible locally or via absolute URLs.

  • Test your PDF output on multiple devices — sometimes fonts or layouts shift unexpectedly.

Converting HTML to PDF doesn’t have to be complicated. Whether you’re saving a single page quickly or automating large batches of files, one of these three methods will fit your workflow.

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.