Documentation Docs
Documentation Docs

Custom Render - Header/Footer

Sections in this topic:

API to use:
Event parameter options:

Handle events

You can use the onRenderHeader and onRenderFooter events to render texts and images in a PDF document's header and footer sections. These events fire for every rendered page in the PDF document.

The event signature is similar for both events - two parameters are passed to event handlers:

  • survey - The event sender. A SurveyPDF object instance,
  • canvas - The canvas to draw graphics. A DrawCanvas object instance.


var surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.onRenderHeader.add(function (survey, canvas) {
    	text: "SurveyPDF Header",
surveyPDF.onRenderFooter.add(function (survey, canvas) {
    	text: "SurveyPDF Footer",

Online Example
Render Header and Footer

Use event parameter options - DrawCanvas object

A DrawCanvas object instance is passed to onRenderHeader and onRenderFooter event handlers as the canvas parameter. This parameter exposes specific properties and methods to help you draw custom graphics in headers and footers.

Drawing area

Use the canvas.rect property to access a rectangle whose coordinates determine the header/footer area available for drawing.

rect: IRect
The rectangle (IRect) is defined by four absolute coordinates - xLeft, xRight, yTop, and yBot.


survey.onRenderHeader.add(function (survey, canvas) {
    var width = canvas.rect.xRight - canvas.rect.xLeft;
    var height = canvas.rect.yBot - canvas.rect.yTop;

The rectangle size depends upon page margin settings defined for a document through the options of an instantiated SurveyPDF:

  • The width of a rectangle equals a document's page width.
  • The height of a rectangle may differ for headers and footers and depends upon a document's vertical margins:
    • headers' height is specified by,
    • footers' height is specified by margins.bottom.

Draw text

Use the canvas.drawText() method to draw a text string within a header/footer.

drawText(textOptions: IDrawTextOptions) => void

This method accepts a parameter of the IDrawTextOptions type with the following properties:

  • text
    text: string
    A string to be drawn.
  • fontSize
    fontSize?: number
    (Optional) The text font size. (Is taken from DocOptions.fontSize, 14 by default)
  • isBold
    isBold?: boolean
    (Optional) Set it to true to make the text bold. (false by default)


survey.onRenderFooter.add(function (survey, canvas) {
        text: "Generated via SurveyJS PDF library",
        fontSize: 10,
        isBold: true

Online Example
Render Header and Footer

Draw image

Use the canvas.drawImage() method to draw an image within a header/footer.

drawImage(imageOptions: IDrawImageOptions) => void

This method accepts a parameter of the IDrawImageOptions type with the following properties:

  • base64
    base64: string
    A string that contains a base64 encoded image.
  • height
    height?: number
    (Optional) Specifies the image height. Used if alignment is set. (canvas.rect's height by default)
  • width
    width?: number
    (Optional) Specifies the image width. Used if alignment is set. (canvas.rect's width by default)


survey.onRenderHeader.add(function (survey, canvas) {
        width: (canvas.rect.yBot - canvas.rect.yTop) * 0.6,
        height: (canvas.rect.yBot - canvas.rect.yTop) * 0.6 		

Online Example
Render Header and Footer

Page numbers

You can add page numbering information into a document's headers/footers. Use the DrawCanvas object's specific properties to obtain page-related information.

countPages property
countPages: number
Gets the total count of pages in the PDF document.

pageNumber property
pageNumber: number
Gets the current page number. Page numbering starts from 1.


survey.onRenderHeader.add(function (survey, canvas) {
        text: canvas.pageNumber + "/" + canvas.countPages

Online Example
Render Header and Footer

Specify element alignment

In calls to the drawText() and drawImage() methods, you can additionally specify the alignment and/or position of an element (text or image) being drawn within a header/footer. For this purpose, use the following parameter properties exposed by IDrawRectOptions (which is a base for both IDrawTextOptions and IDrawImageOptions).

  • horizontalAlign
    horizontalAlign?: HorizontalAlign
    (Optional) Specifies an element's horizontal alignment.
    Available values: notset, left, center, right. (Default is center)
  • verticalAlign
    verticalAlign?: VerticalAlign
    (Optional) Specifies an element's vertical alignment.
    Available values: notset, top, middle, bottom. (Default is middle)
  • margins
    margins?: IMargin
    (Optional) Specifies an element's margins inside the drawing rectangle.
    Available values: left, right, top, bot. (All are set to zero by default)
    Margins are in effect when applied together with the corresponding alignment.
  • rect
    rect?: IRect
    (Optional) An object (IRect) with coordinates of a text rectangle.
    Available values: xLeft, xRight, yTop, yBot.
    Use rect as an alternative to alignment settings.


survey.onRenderFooter.add(function (survey, canvas) {
        text: canvas.pageNumber + "/" + canvas.countPages,
        horizontalAlign: "right",
        verticalAlign: "bottom",
        margins: {
            right: 12,
            bot: 12

Online Example
Render Header and Footer

Copyright © 2023 Devsoft Baltic OÜ. All rights reserved.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.