HTML to PDF (Precise Layout)

Render HTML/CSS to a PDF with precise headers, footers, and print settings

This tool renders HTML/CSS to PDF using a headless browser for high-fidelity layout.

Header & Footer:

Provide custom HTML templates for headers/footers
Use  and  for page numbers
CSS in header/footer is supported with inline styles

Print Options:

A4/Letter/Legal page sizes
Margin control (mm)
Print background and scaling
CSS @page and @media print support (enable "Prefer CSS Page Size")

Key Facts

Category: Document Tools
Input Types: textarea, select, checkbox, number
Output Type: file
Sample Coverage: 4
API Ready: Yes

Overview

This tool converts HTML and CSS into PDF documents with precise control over layout, including custom headers, footers, and print settings. It uses a headless browser to ensure high-fidelity rendering, making it ideal for professional documents that require exact formatting.

When to Use

•When you need to generate PDFs from web-based content with exact layout preservation.
•When custom headers and footers, such as dynamic page numbers or logos, are required.
•When specific print configurations like page size, margins, and background printing must be applied.

How It Works

•Input your HTML content and optional custom CSS for styling.
•Configure page settings such as size, orientation, margins, and scale.
•Define header and footer templates using HTML with placeholders for page numbers.
•The tool renders the content in a headless browser and outputs a PDF file.

Use Cases

Generating invoices or receipts with company branding and automatic page numbers.

Creating printable reports from web dashboards with consistent headers and footers.

Producing manuals or guides with precise layout and custom print settings.

Examples

1. Generate an Invoice PDF

Freelancer

Background: You have an HTML invoice template that needs to be converted to PDF for client billing.
Problem: Manual PDF conversion doesn't maintain styling or add page numbers automatically.
How to Use: Paste the HTML invoice code into the HTML Content field, add CSS for formatting, and set a footer with page numbers using the footer template.
Example Config: Footer template: <div style='text-align:center;'>Page of </div>
Outcome: A professional PDF invoice with correct layout, page numbers, and no manual formatting needed.

2. Create a Printable Dashboard Report

Background: A web dashboard with charts and tables needs to be printed for a presentation.
Problem: Browser print preview doesn't preserve the dashboard layout or add custom headers.
How to Use: Input the dashboard HTML, configure A4 landscape orientation with margins, and add a header with the report title.
Outcome: A high-quality PDF report that matches the web view, ready for printing and sharing.

Try with Samples

html, pdf

PDF Samples

Generated PDF samples from tools dated 2026-02-01 to 2026-02-10

title token pdf

pdf

HTML with Images Samples

HTML source code samples with images for testing extraction

title token html

sample

Markdown Slide Deck Samples

Remark/Marp style Markdown slide decks for testing PDF export layouts

matched family pdf

pdf

Code Comment Samples

Sample code files with various comment styles for testing comment removal

keywords html,css

sample

Related Hubs

Html Convert Tools

Explore 11 html tools for convert workflows and compare closely related utilities quickly.

Pdf Convert Tools

Explore 28 pdf tools for convert workflows and compare closely related utilities quickly.

Pdf Tools

Explore 12 pdf tools for utility workflows and compare closely related utilities quickly.

Pdf Generate Tools

Explore 10 pdf tools for generate workflows and compare closely related utilities quickly.

FAQ

What page sizes are supported?

A4, Letter, Legal, and A5.

How do I add page numbers to the PDF?

Use and in your header or footer HTML template.

Can I use CSS for print-specific styling?

Yes, you can add custom CSS and enable 'Prefer CSS Page Size' to use @page rules.

What is the 'Wait Until' option for?

It controls when the page is considered loaded, such as waiting for network activity to finish.

How can I adjust the PDF scaling?

Use the Scale option to set a value between 0.5 and 2, with 1 as the default.

API Documentation

Request Endpoint

POST /en/api/tools/html-to-pdf-precise

Request Parameters

Parameter Name	Type	Required	Description
htmlContent	textarea	Yes	-
cssContent	textarea	No	-
pageSize	select	No	-
landscape	checkbox	No	-
printBackground	checkbox	No	-
scale	number	No	-
marginTop	number	No	-
marginBottom	number	No	-
marginLeft	number	No	-
marginRight	number	No	-
headerTemplate	textarea	No	-
footerTemplate	textarea	No	-
mediaType	select	No	-
waitUntil	select	No	-
waitTime	number	No	-
preferCssPageSize	checkbox	No	-

Response Format

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}

File: File

AI MCP Documentation

Add this tool to your MCP server configuration:

{
  "mcpServers": {
    "elysiatools-html-to-pdf-precise": {
      "name": "html-to-pdf-precise",
      "description": "Render HTML/CSS to a PDF with precise headers, footers, and print settings",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=html-to-pdf-precise",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]

Categories