Custom header and footer for PDFs - Doczilla

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