Create a PDF of any size over API

Why is 8.5"x11" the size we think of for paperwork? That is a good question that I don’t know the answer to. A quick Google search gave me this answer. But we don’t care too much about why 8.5"x11", we want to know how to change that size. With paperwork being synonymous with PDF in the modern age, generating a PDF with a different size is the same as printing paper that isn’t 8.5"x11". Not only can you generate a PDF that is not 8.5"x11", and you can do it via a simple-to-use API. Let’s see how to do it using Anvil’s API, while using a barcode as an example.

First things first, if you need a quick way to get set up seeing our API in action, check out this blog post on how to get set up with Postman for Anvil. You’ll want to fork the PDF APIs collection, and use the Send HTML to generate a PDF request.

Ready to see this in action?

Let’s go

The end result we will end up with at the end of this blog post will be this barcode:

The final JSON to generate the above barcode can be found in this GitHub gist.

There are 3 keys in the JSON payload that are important to generate PDFs of non-standard size:

1. type - either html or markdown. The default is markdown, but we will be using HTML and CSS.
2. data - will contain 2 child keys for html and css. As you might have surmised, you will put your HTML in the html key and CSS in the css key. Pretty straightforward, but I’ll cover a couple nuances later.
3. page - this key is where the magic happens for changing the size of the PDF. This key is completely optional, but it controls the width, height, margin, and even where the page count of your PDF appears.

The page key

This key is completely optional. If left out of your request, Anvil will provide the following defaults:

{
  "page": {
    "width": "612px",
    "height": "792px",
    "margin": "50px"
  }
}

The page itself will be 612px wide and 792px tall. But with the default margin set at 50px, what will our remaining content space be? 512px x 692px. The margin key supports the same shorthand as CSS margin, so each of top, right, bottom, and left margin will be 50px.

Since we want to customize the size of the PDF, the defaults are not what we want to use. In addition to width, height, and margin, you can also specify each side’s margin via marginTop, marginRight, marginBottom, or marginLeft. Specifying a side’s margin will override the margin’s value for that side. A couple examples:

{
  "page": {
    "margin": "60px",
    "marginBottom": "100px"
  }
}

All sides will have margin 60px, with the bottom margin being 100px

{
  "page": {
    "margin": "80px 40px",
    "marginLeft": "100px"
  }
}

Top and bottom margin will be 80px each, right margin will be 40px, and left margin will be 100px

Note: you cannot specify more horizontal margin than there is width, or more vertical margin than there is height. The API will tell you if you hit your limit, but an example would be:

{
  "page": {
    "height": "100px",
    "margin": "60px"
  }
}

Not good. Top and bottom margin will both be 60px, totalling 120px of vertical margin. Since height is specified at 100px, we only have -20px for content… which isn’t possible. The API will error in this case

Using different units

Pixels make the internet go ‘round, but they aren’t very real-world friendly. In the metric system, inches are the way to go; the rest of the world will want to use centimeters. Both are supported! Check out our docs to see the most current list of supported units for all of the page’s length values, but as of writing Anvil supports mm, cm, in, px, em, rem, pt, and pc.

The barcode we want to generate is about 2.9 inches wide and 1.4 inches tall. We just want the barcode and nothing else, so we will have 0 margin.

{
  "page": {
    "width" : "2.9in",
    "height": "1.4in",
    "margin": "0",
  }
}

Our final page data to generate a barcode

HTML & CSS

This is the part where your inner designer/frontend engineer shines. Whatever you create in HTML and CSS, you pass to the Anvil API via the data payload. As a simple example:

{
  "data": {
    "html": "<h1>I am the page title</h1>",
    "css": "h1 { color: red; }",
  }
}

Simple HTML & CSS that will create a PDF with only a red title: “I am the page title"

For our example, I used HTML and CSS provided by the Code Project. Thank you to the people over there for putting together a wonderful article and sample code for a barcode in HTML & CSS!

Combining the data payload with page payload gives us the final request to send to the API, found in this GitHub gist. Short and sweet, but that’s all there is to generating a PDF of non-standard size!

Note: you do not have to wrap your HTML in a body tag or a container of any kind - Anvil wraps your HTML in a body before generating the PDF. You can if you need the whole page to behave a certain way, but it’s not required.

Automate your PDF generation

We’ve seen how to generate a barcode. You can apply the same methods to generate event tickets, shipping labels, or any other kind of PDF. Since this functionality is over the API, you could script something directly against the PDF generation API and it would probably save you a great deal of time when you need certain PDFs.

But a better way to really harness this power is by using one of our prebuilt client libraries. We have clients for Node.js (see generatePDF), Python, C#/.NET (see RestClient.generatePDF), and more in the works, like a usage example with Java. By using these clients in your application, you’ll save time on the overhead of interfacing with our API - all you need to do is design the perfect PDF, format it with user data, and send it to us.

Whether you’re generating individual PDFs via Postman, or generating hundreds, thousands, or more via a client, we’d love to hear from you. Let us know what you’re working on at hello@useanvil.com, or if you need a little more help getting started with the PDF generation API, send us a message at support@useanvil.com.