Custom Header and Footer
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.
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 documentThe 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
}
});
});