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:

• SurveyHelper
• FlatQuestion

Refer to their declarations to learn more about the available constants.

See also

For more details, see the following documentation section:

• Customization Options