Headers and/or Footers for your PDFs

You can use HTML to specify the header and/or footer contents and layout. Basically you can use all HTML tags, which are normalled allowed within the <BODY> tag (so don't use <HTML>, <BODY>, <HEAD> etc).

By doing so you'll get a lot of control over the layout of your header/footer. You can align it, use images, font styles, colors etc. Just make sure you have enough margin space for your header/footer to reside in.

As if full HTML is not enough to work with, we have also added the parameters in the below table, to ensure that you can use page numbering as well as display current date & time information.

Note that you need to have enough space in the margins if you want to use a header and/or footer. You can set the margins in our members area or via the parameters as described in our API documentation.

ParameterDescription
%pagepage number
%frompagefirst page number
%topagelast page number*
%romanpagepage number in Roman style (so I, II, III, IV, V etc)
%romanfrompagefirst page number in Roman style
%romantopagelast page number in Roman style*
%urlURL that you're converting
%titletitle of the web page
%DDday of the month
%MMmonth of year
%YYYYyear
%hhhour
%mmminute
%sssecond

*For full website conversions and batch URL to PDF conversions we are NOT able to include the correct number of total pages in the header or footer. This is because each web page is done separately before being merged in the full PDF.

Adding page numbers to your PDFs

As you can see in the table above, you can get a page number on each page of your PDF if you like. It comes down to using the right parameters in the header and/or footer parameter. The easiest way is to just do this in our members area.

In our members area you'll find the header and footer sections, where you can customize the way the top and bottom part of the PDF pages look. If you enter one of the parameters (such as %page) there, then you will notice the contents appear in the PDF. So if you want the page number to appear in the header for example, you just enter %page in the header section in our members area.

You can of course also do this with the API as well. In that case you send %page in the header parameter and it will show the page number in the header!

Using different headers and/or footers on different pages

Sometimes you maybe want to use a header or footer only on the first (or maybe last) page. Or maybe not on the first page? Well - we get you covered.

The below table shows you some classes that you can use to achieve this. By using them you control on which pages the header and/or footer shows up. Just assign them to an element to control where parts of your header/footer show up.

You can also wrap only part of the header/footer in one of these classes if you like. Everything that's not wrapped in one of these classes will show up on all pages.

ClassDescription
firstpageif you assign this class to an element such as a DIV, then it will show up on the first page
middlepagesif you assign this class to an element such as a DIV, then it will show up on the all pages in between the first and last page
lastpageif you assign this class to an element such as a DIV, then it will show up on the last page

Demo

Below we used some of the features described in the section to the left to give the PDF of this page a footer, which is right aligned, contains the current date and the page number in red.

Note that you have to properly URL encode the HTML if you're using this in a query string like below.

Download demo PDF!