Features

February 14, 2022

HTML to PDF

Design printable documents in HTML and CSS.

Jonathan Markwell
Jonathan Markwell
2 min read
Share this article:

Converting HTML & CSS into a PDF is simple with Urlbox.

It's a little more involved than converting a URL to a PDF. You need to send Urlbox your HTML and CSS.

First you need to prepare your HTML and CSS. We've added width, height and retina options here so it renders nicely.

{
  "html": "<html><head></head><body><h1>Hello World</h1><p>This HTML has been turned into a PDF.</p></body></html>",
  "css": "body{text-align:center;padding: 10px}",
  "width": "500",
  "height": "200",
  "retina": true
}

All that needs to be URI encoded for Urlbox to process it as a GET request:

https://api.urlbox.io/v1/[API_KEY]/pdf?html=%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3Ch1%3EHello%20World%3C%2Fh1%3E%3Cp%3EThis%20HTML%20has%20been%20turned%20into%20a%20PDF.%3C%2Fp%3E%3C%2Fbody%3E%3C%2Fhtml%3E&css=body%7Btext-align%3Acenter%3Bpadding%3A%2010px%7D&width=500&height=200&retina=true

Linking to a dynamic PDF

Yes you can literally create a link to that and your users will be able to view the PDF:

<a href="https://api.urlbox.io/v1/[API_KEY]/pdf?html=%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3Ch1%3EHello%20World%3C%2Fh1%3E%3Cp%3EThis%20HTML%20has%20been%20turned%20into%20a%20PDF.%3C%2Fp%3E%3C%2Fbody%3E%3C%2Fhtml%3E&css=body%7Btext-align%3Acenter%3Bpadding%3A%2010px%7D&width=500&height=200&retina=true" />View PDF</a>

Which would result in this:

View PDF

Maybe you want users to download the PDF with a particular filename? Easy, just add one parameter:

<a href="https://api.urlbox.io/v1/[API_KEY]/pdf?html=%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3Ch1%3EHello%20World%3C%2Fh1%3E%3Cp%3EThis%20HTML%20has%20been%20turned%20into%20a%20PDF.%3C%2Fp%3E%3C%2Fbody%3E%3C%2Fhtml%3E&css=body%7Btext-align%3Acenter%3Bpadding%3A%2010px%7D&width=500&height=200&retina=true&download=my-document.pdf" />Download PDF</a>

Which would result in this:

Download PDF

All the PDF options you need

There are over a dozen PDF-specific options in the Urlbox API.

Set the page size to A4, Letter or one of 9 other alternatives. Change the print margins, scale, background and more.

Full documentation here.

You're not limited to generating PDFs with Urlbox

Urlbox has many output formats beyond PDF. You can also render:

  • PNG
  • JPEG
  • WebP
  • SVG
  • AVIF
  • HTML (after JS has executed)
  • JSON (Coming soon).

More Urlbox Features

Urlbox is powerful with dozens of features for taking screenshots at scale.

If you found this useful you might also want to checkout some of our other popular Urlbox features:

Index

All Features

Free Trial

Designers, law firms and infrastructure engineers trust Urlbox to accurately and securely convert HTML to images at scale. Experience it for yourself.