Custom header and footer for PDFs

Customize your PDFs by incorporating headers and footers using the headerTemplate and footerTemplate options available for PDFs. See PDF options for all available options.

Example

It is recommended to specify a font and color for your header/footer, the default is white and small.

We are adding a margin to prevent the header from overlapping the PDFs content.

curl --request POST 'https://api.doczilla.app/v1/pdf' \
  --header 'Authorization: Bearer <your token>' \
  --header 'Content-Type: application/json' \
  --output 'doczilla.pdf' \
  --data '{
    "page": {
      "html": "PGRpdj5Zb3VyIGZpcnN0IERvY3ppbGxhIFBERjwvZGl2Pg=="
    },
    "pdf": {
      "displayHeaderFooter": true,
      "headerHtml": "PGRpdiBzdHlsZT0iZm9udC1zaXplOiAxNnB4OyBjb2xvcjogYmxhY2s7IHBhZGRpbmc6IDIwcHgiPkhlYWRlcjwvZGl2Pg==",
      "footerHtml": "PGRpdiBzdHlsZT0iZm9udC1zaXplOiAxNnB4OyBjb2xvcjogYmxhY2s7IHBhZGRpbmc6IDIwcHgiPkZvb3RlciAtIDxzcGFuIGNsYXNzPSJwYWdlTnVtYmVyIj48L3NwYW4+LzxzcGFuIGNsYXNzPSJ0b3RhbFBhZ2VzIj48L3NwYW4+PC9kaXY+",
      "margin": {
        "top": "75px"
      }
    }
  }'

import Doczilla from '@doczilla/node'

const doczilla = new Doczilla('<your token>')

const pdf = await doczilla.pdf.direct({
  page: {
    html: '<div>Your first Doczilla PDF</div>'
  },
  pdf: {
    displayHeaderFooter: true,
    headerHtml: '<div style="font-size: 16px; color: black; padding: 20px">Header</div>',
    footerHtml: '<div style="font-size: 16px; color: black; padding: 20px">Footer - <span class="pageNumber"></span>/<span class="totalPages"></span></div>',

    margin: {
      top: '75px'
    }
  }
})

Output

From HTML Handpick pages

General

Screenshots

PDFs

Templating

Custom header and footer for PDFs

Example

Output

​Example

​Output

Example

Output