Custom Render - Header/Footer

Sections in this topic:

• Handle events
• Use event parameter options - DrawCanvas object
  • Drawing area
  • Draw text
  • Draw image
  • Page numbers
• Specify element alignment

API to use:
Events:
SurveyPDF.onRenderHeader
SurveyPDF.onRenderFooter
Event parameter options:
DrawCanvas.rect
DrawCanvas.drawText()
DrawCanvas.drawImage()
DrawCanvas.pageNumber
DrawCanvas.pageCount

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.

Example:

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

Online Example
Render Header and Footer

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.

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.

Example:

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 margins.top,
  • footers' height is specified by margins.bottom.

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)

Example:

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

Online Example
Render Header and Footer

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)

Example:

survey.onRenderHeader.add(function (survey, canvas) {
    canvas.drawImage({
        base64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPk+A8AARUBCWbeTf4AAAAASUVORK5CYII=',
        width: (canvas.rect.yBot - canvas.rect.yTop) * 0.6,
        height: (canvas.rect.yBot - canvas.rect.yTop) * 0.6 		
    });
});

Online Example
Render Header and Footer

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

pageCount property
pageCount: 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.

Example:

survey.onRenderHeader.add(function (survey, canvas) {
    canvas.drawText({
        text: canvas.pageNumber + "/" + canvas.pageCount
    });
});

Online Example
Render Header and Footer

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.

Example:

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

Online Example
Render Header and Footer