Custom Header and Footer

SurveyPDF render header and footer events

You may use onRenderHeader and onRenderFooter events to render some text and images in header and footer sections in pdf document

The events is fired for every rendered pdf page. Events accepts two parameters: instance of SurveyPDF and instance of DrawCanvas object

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

Page number

DrawCanvas object contains pageNumber property with number of current page and countPages property with total count of pages in document

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

Drawing area

DrawCanvas's object property rect is absolute coordinates of available for drawing header of footer rectangle

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

Draw text

DrawCanvas's object method drawText allows to draw some text in available for drawing area. It accepts object with following properties:

• text: string – string that will be drawn
• fontSize?: number – optional font size of text (14 by default)
• isBold?: boolean – set true to make text bold (false by default)

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

Draw image

DrawCanvas's object method drawImage allows to draw some image in available for drawing area. It accepts object with following properties:

• base64: string – string with base64 encoded image
• width?: number – optional, specifies image width (used if alignment set, canvas.rect's width by default)
• height?: number – optional, specifies image height (used if alignment set, canvas.rect's height by default)

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 		
    });
});

Alignment

You may pass some additional parameters to drawText and drawImage methods to set position and alignment:

• horizontalAlign?: HorizontalAlign – optional, specifies horizontal alignment (notset, left, center or right) of item if set (center by default)
• verticalAlign?: VerticalAlign – optional, specifies vertical alignment (notset, top, middle, bottom) of item if set (middle by default)
• margins?: IMargin – optional, specifies margins (left, right, top, bot) inside the drawing rectangle (used if alignment set, all zero by default)
• rect?: IRect – optional, object with coordinates (xLeft, xRight, yTop, yBot) of text rectangle (used if alignment not set)

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