Add Custom Markup to a PDF Form
SurveyPDF - How to render custom markup
This example demonstrates how to generate a custom markup within a PDF document. Deep document customization might be required to make a document look similar to a predefined design prototype.
To render a custom PDF markup, this example combines several approaches listed below.
Use custom fonts
The SurveyJS PDF Generator library allows you to integrate custom fonts into a PDF document and use them to render survey texts.
The addFont method adds a custom font to a PDF document.
The fontName option specifies the font to render PDF document texts.
const TITLE_FONT_BASE64 = "< base64 encoded string - font for titles >";
const TEXT_FONT_BASE64 = "< base64 encoded string - ordinal font >";
// Add custom fonts to a document
const base64TitleFont = TITLE_FONT_BASE64;
const base64TextFont = TEXT_FONT_BASE64;
SurveyPDF.DocController.addFont('Roboto', base64TitleFont, 'bold');
SurveyPDF.DocController.addFont('Roboto', base64TextFont, 'normal');
Learn more:
Change Fonts
Use options passed to a SurveyPDF constructor
This sample sets the following SurveyPDF options (options are declared by the IDocOptions interface and are used to initiate a SurveyPDF instance):
-
fontName
Specifies the font's name or family for the PDF document's text elements. -
fontSize
Specifies the base font size (in points) for the PDF document's text elements. -
textFieldRenderAs
Specifies the manner in which single-line text fields display respondent answers (especially long ones) in the result PDF within specific question types.
-
margins
Specifies the margins for document pages.
const options = {
fontName: 'Roboto', // Set to the added custom font's name
fontSize: 10,
textFieldRenderAs: 'multiLine',
margins: {
left: 10.0,
right: 10.0,
top: 5.0,
bot: 10.0
}
};
var surveyPDF = new SurveyPDF.SurveyPDF(json, options);
Learn more:
Options in SurveyPDF Constructor
Customize a header
The onRenderHeader event is handled in this example to render a custom image (a company logo), customize the text color, and draw a gray underline in a PDF document's header section.
surveyPDF
.onRenderHeader
.add(function (survey, canvas) {
const unfoldedPacks = canvas.packs[0].unfold();
// Colorize the page title
unfoldedPacks.forEach(el => el.textColor = "#00008b");
// Colorize the row line under the title
unfoldedPacks[unfoldedPacks.length - 1].color = "gray";
// Specify the thickness of the row line under the title
unfoldedPacks[unfoldedPacks.length - 1].yTop += canvas.controller.unitHeight * 0.8;
// Render a company logo
canvas.drawImage({
base64: LOGO_BASE64,
horizontalAlign: 'right',
width: (canvas.rect.xRight - canvas.rect.xLeft) * 0.15,
margins: {
top: 15,
right: 18
}
});
});
Learn more:
Custom Render ― Header/Footer
Customize a question
The onRenderQuestion event is handled in this example to render each survey question in a custom manner. In particular, to change the title color and to draw a gray line under a question.
surveyPDF
.onRenderQuestion
.add(function (survey, options) {
// Colorize a question's title
options.bricks[0].unfold()[0].textColor = "blue";
// Colorize the row line under a question and specify the line's thickness
const lastRowBricks = options.bricks[options.bricks.length - 1].unfold();
lastRowBricks[lastRowBricks.length - 1].color = "gray";
lastRowBricks[lastRowBricks.length - 1].yTop += options.controller.unitHeight * 1.3;
return new Promise(function (resolve) {
resolve();
});
});
Learn more:
Custom Render ― Question Elements
Change render constant values
The example code implements deep modification of the SurveyPDF render by changing the default values of the following render-related constants.
-
FORM_BORDER_VISIBLE
Specifies whether survey questions display a border within their input fields.
Learn more: #63 -
VALUE_READONLY_PADDING_SCALE
Specifies the padding of read-only input fields. Affects the left, right, and bottom borders of an input element. Given as a decimal. -
MULTIPLETEXT_TEXT_PERS
Specifies the width of input field titles in questions of the Multiple Text type. Given in percentage. -
TITLE_PAGE_FONT_SIZE_SCALE
Specifies the font size of page titles. Given as a decimal. -
TITLE_FONT_SCALE
Specifies the font size of question titles. Given as a decimal. -
TEXT_COLOR
Specifies the color of all texts displayed in all questions. -
CONTENT_INDENT_SCALE
Specifies the horizontal indent of the question content related to the question title. Given as a decimal. -
CONTENT_GAP_VERT_SCALE
Specifies the vertical indent of the question content related to the question title. Given as a decimal.
SurveyPDF.SurveyHelper.FORM_BORDER_VISIBLE = false;
SurveyPDF.SurveyHelper.VALUE_READONLY_PADDING_SCALE = 0;
SurveyPDF.SurveyHelper.MULTIPLETEXT_TEXT_PERS = 0.55;
SurveyPDF.SurveyHelper.TITLE_PAGE_FONT_SIZE_SCALE = 1.4;
SurveyPDF.SurveyHelper.TITLE_FONT_SCALE = 1.4;
SurveyPDF.SurveyHelper.TEXT_COLOR = 'black';
SurveyPDF.FlatQuestion.CONTENT_INDENT_SCALE = 0;
SurveyPDF.FlatQuestion.CONTENT_GAP_VERT_SCALE = 0.1;
Such render-related constants are typically exposed by these two classes of SurveyPDF:
Refer to their declarations to learn more about the available constants.
See also
For more details, see the following documentation section: