Custom Render - Header/Footer
Sections in this topic:
API to use:
Events:
SurveyPDF.onRenderHeader
SurveyPDF.onRenderFooter
Event parameter options:
DrawCanvas.rect
DrawCanvas.drawText()
DrawCanvas.drawImage()
DrawCanvas.pageNumber
DrawCanvas.pageCount
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.
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
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.
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
.
- headers' height is specified by
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)
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
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 ifalignment
is set. (canvas.rect's height by default) - width
width?: number
(Optional) Specifies the image width. Used ifalignment
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
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.
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
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 iscenter
) - verticalAlign
verticalAlign?: VerticalAlign
(Optional) Specifies an element's vertical alignment.
Available values:notset
,top
,middle
,bottom
. (Default ismiddle
) - margins
margins?: IMargin
(Optional) Specifies an element's margins inside the drawing rectangle.
Available values:left
,right
,top
,bot
. (All are set tozero
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
.
Userect
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