Render custom markup

Sorry, we can't retrieve the data from server. Please comeback later.

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.

        .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
                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.

        .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) {

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.

    Specifies whether survey questions display a border within their input fields.
    Learn more: #63
    Specifies the padding of read-only input fields. Affects the left, right, and bottom borders of an input element. Given as a decimal.
    Specifies the width of input field titles in questions of the Multiple Text type. Given in percentage.
    Specifies the font size of page titles. Given as a decimal.
    Specifies the font size of question titles. Given as a decimal.
    Specifies the color of all texts displayed in all questions.
    Specifies the horizontal indent of the question content related to the question title. Given as a decimal.
    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:


Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.