DEV Community: Liam Turner

Create a HTML to PDF file Downloader with Puppeteer

Liam Turner — Tue, 27 Jan 2026 12:35:03 +0000

In this tutorial, we’ll build a small web application that allows users to:

Enter a webpage URL
Preview the page (optional)
Download it as a PDF
Choose PDF options like page size and orientation

We’ll use Node.js, Express, Puppeteer, and some HTML/CSS/JS. for this example, but its just as easy to implement in other languages and environments.

Step 1: Project Setup

Create a new folder and initialize a Node.js project

mkdir puppeteer-pdf-downloader
cd puppeteer-pdf-downloader
npm init -y

We are using ES Modules in this example so add "type": "module", to your package.json file

{
  "name": "puppeteer-pdf-downloader",
  "version": "1.0.0",
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "body-parser": "^1.20.2",
    "puppeteer": "^21.4.0"
  }
}

Next install our dependencies

npm install express body-parser puppeteer

Step 2: Create the Frontend (index.html)

For our basic example we will create index.html file in our project root to house the ui for the downloader.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Downloader with Preview</title>
    <style>
        /* General styling for a clean, modern UI */
        * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: #f5f6fa; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; }
        h1 { margin-top:30px; color:#2f3640; }
        form { background-color:#fff; padding:20px 25px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); margin:20px 0; display:flex; flex-direction:column; gap:12px; width:90%; max-width:500px; }
        input, select { padding:10px 12px; border:1px solid #dcdde1; border-radius:8px; font-size:16px; width:100%; }
        button { padding:12px; border:none; border-radius:8px; font-size:16px; font-weight:bold; cursor:pointer; transition:background 0.3s; }
        button[type="submit"] { background-color:#0097e6; color:white; }
        button[type="submit"]:hover { background-color:#40739e; }
        button#downloadBtn { background-color:#44bd32; color:white; }
        button#downloadBtn:hover { background-color:#4cd137; }
        h2 { color:#2f3640; margin-bottom:10px; }
        iframe { border:1px solid #dcdde1; border-radius:12px; width:90%; max-width:900px; height:500px; margin-bottom:40px; }
        label { font-weight:bold; margin-right:8px; }
    </style>
</head>
<body>
    <h1>Webpage to PDF Downloader</h1>

    <form id="pdfForm">
        <input type="text" id="url" placeholder="Enter webpage URL" required>

        <div style="display:flex; gap:10px; flex-wrap: wrap;">
            <div>
                <label for="format">Page Size:</label>
                <select id="format">
                    <option value="A4">A4</option>
                    <option value="Letter">Letter</option>
                </select>
            </div>

            <div>
                <label for="orientation">Orientation:</label>
                <select id="orientation">
                    <option value="portrait">Portrait</option>
                    <option value="landscape">Landscape</option>
                </select>
            </div>
        </div>

        <div style="display:flex; gap:10px; margin-top:10px;">
            <button type="button" id="previewBtn">Preview Page</button>
            <button type="button" id="downloadBtn">Download PDF</button>
        </div>
    </form>

    <h2>Preview:</h2>
    <iframe id="preview"></iframe>

    <script>
        // Elements
        const previewBtn = document.getElementById('previewBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const preview = document.getElementById('preview');
        const urlInput = document.getElementById('url');
        const formatSelect = document.getElementById('format');
        const orientationSelect = document.getElementById('orientation');

        // Helper: Get URL and PDF options
        const getCurrentOptions = () => ({
            url: urlInput.value,
            options: {
                format: formatSelect.value,
                landscape: orientationSelect.value === 'landscape'
            }
        });

        // Preview button click
        previewBtn.addEventListener('click', () => {
            const { url } = getCurrentOptions();
            if (!url) return alert('Please enter a URL first');
            preview.src = url; // Load webpage in iframe for preview
        });

        // Download button click
        downloadBtn.addEventListener('click', async () => {
            const { url, options } = getCurrentOptions();
            if (!url) return alert('Please enter a URL first');

            try {
                const response = await fetch('/download', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ url, options })
                });

                if (!response.ok) throw new Error('Failed to download PDF');

                const blob = await response.blob();
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = 'page.pdf';
                link.click();
            } catch (err) {
                alert(err.message);
            }
        });
    </script>
</body>
</html>

The index.html file serves as the frontend interface for the PDF downloader. It provides an input field where users can enter the URL of the webpage they want to convert, along with dropdowns to select PDF page size (A4 or Letter) and orientation (portrait or landscape). Users can optionally click the Preview Page button to load the webpage in an iframe, allowing them to see it before generating a PDF.

The Download PDF button sends a POST request to the backend (server.js) using fetch, including the URL and PDF options as JSON. The server receives this data, uses Puppeteer to render the page in a headless browser, generates a PDF according to the selected options, and returns it as a downloadable file.

The frontend then creates a temporary link from the response blob, automatically triggering the download, making the process seamless for the user.

Step 3: Backend (server.js)

Create server.js in our project root

import express from 'express';
import bodyParser from 'body-parser';
import puppeteer from 'puppeteer';

const app = express();

// Middleware
app.use(bodyParser.json());
app.use(express.static('.')); // Serve index.html

// Endpoint to generate PDF
app.post('/download', async (req, res) => {
    const { url, options } = req.body;
    if (!url) return res.status(400).send('URL is required');

    try {
        // Launch Puppeteer
        const browser = await puppeteer.launch();
        const page = await browser.newPage();

        // Navigate to the URL
        await page.goto(url, { waitUntil: 'networkidle0' });

        // Generate PDF with options
        const pdfBuffer = await page.pdf({
            format: options?.format || 'A4',
            landscape: options?.landscape || false,
            printBackground: true, // Include styles and images
            margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
        });

        await browser.close();

        // Send PDF as response
        res.set({
            'Content-Type': 'application/pdf',
            'Content-Disposition': 'attachment; filename="page.pdf"',
        });
        res.send(pdfBuffer);

    } catch (err) {
        console.error(err);
        res.status(500).send('Error generating PDF');
    }
});

// Start server
app.listen(3000, () => {
    console.log('Server running at http://localhost:3000');
});

The server.js file acts as the backend of the PDF downloader. It uses Express to serve the index.html frontend and to handle POST requests at the /download endpoint. When the frontend sends a URL and PDF options, the server launches Puppeteer, which opens a headless browser and navigates to the specified webpage.

Once the page fully loads, Puppeteer generates a PDF with the requested settings, including page size, orientation, and background styles. The PDF is then sent back to the frontend as a binary response with proper headers so the browser recognizes it as a downloadable file.

This setup allows the frontend to remain lightweight while Puppeteer handles the heavy lifting of rendering and converting webpages into high-quality PDFs.

Step 4: Run the our app

In the terminal run the below

node server.js

now open your browser and type
http://localhost:3000

You should see the the PDF Downloader form below

Next add a url to the input field and check that you can change options, and preview. Once you're happy click the 'Download PDF' button, wait a couple of seconds and the Download dialog will appear. Give your file a name, choose file destination and and click Save.

In this tutorial, we built a simple webpage to PDF downloader using Puppeteer, Express, and a styled frontend. Users can enter a URL, optionally preview it, select PDF options, and download it immediately. This is a basic example, but you can explore Puppeteer’s documentation to add more advanced features such as custom margins, page numbers, scaling and more

Why Headless Browsers Are Ideal for Accurate Webpage to PDF Conversion

Liam Turner — Mon, 26 Jan 2026 10:07:47 +0000

Converting a webpage into a PDF sounds simple—until you try to do it reliably. Modern websites are dynamic, JavaScript-heavy, responsive, and full of edge cases that traditional HTML-to-PDF tools often struggle with.

That’s why headless browsers have become the gold standard for webpage-to-PDF conversion.

In this post, we’ll look at what a headless browser is, why it outperforms other PDF conversion methods, which tools use this approach, and also the caveats to keep in mind.

What Is a Headless Browser?

A headless browser is a real web browser (like Chrome or Firefox) that runs without a visible user interface. It renders webpages exactly as a normal browser would—but entirely in the background.

Because it uses the same rendering engine as a full browser, it understands:

JavaScript
CSS (including modern layout systems like Flexbox and Grid)
Fonts, media queries, and print styles
Client-side rendering frameworks (React, Vue, Angular, etc.)

Advantages of Using a Headless Browser for PDF Conversion

1. Pixel-Perfect Rendering

Headless browsers render pages using the same engine as end-user browsers. This means:

What you see in Chrome is what you get in the PDF
No broken layouts, missing fonts, or CSS quirks
Accurate handling of margins, scaling, and page break

Traditional converters often rely on partial CSS support or outdated rendering engines, leading to inconsistent results.

2. Full JavaScript Support

Many modern websites don’t even exist until JavaScript runs.

Headless browsers can:

Execute all JavaScript before generating the PDF
Support single-page applications (SPAs)
Can wait for network requests or DOM elements to load

3. Built-In Print Styling

Browsers natively support print-specific CSS:

@media print {
  .no-print { display: none; }
}

With a headless browser, you can:

Use print media queries
Control headers, footers, page numbers
Fine-tune page breaks with break-before and break-after

This gives designers and developers precise control over the final PDF layout.

4. Consistent Results Across Environments

Because headless browsers run in controlled environments:

PDFs look the same in development, staging, and production
Dockerized setups eliminate OS-level font and rendering issues
CI/CD pipelines can generate PDFs automatically

Popular Tools That Use Headless Browsers

Open-Source Libraries

Puppeteer – Node.js API for headless Chrome
Playwright – Multi-browser automation
Selenium – Cross-language browser automation

Hosted & API-Based Services

Turn2PDF – HTML/URL → PDF conversion API that uses headless browser rendering with customization options (includes headers, CSS injection, etc.).

PDFShift – A cloud API for converting HTML and URLs into PDFs, powered by a headless Chrome backend with support for modern CSS and JavaScript.

API2PDF – A multi‑engine PDF conversion API that offers a headless Chrome endpoint in addition to other options.

How to Convert HTML to PDF in 3 Easy Ways

Liam Turner — Sat, 24 Jan 2026 12:57:46 +0000

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

Open the HTML page in your browser (Chrome, Firefox, or Edge).
Press Ctrl + P (Windows) or Cmd + P (Mac) to open print dialog.
Select “Save as PDF” or “Microsoft Print to PDF” as the printer.
Adjust settings like layout, margins, and background graphics.
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();
})();

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.