Customize Form Fields

SurveyJS PDF Generator provides an API that allows you to add, remove, and substitute form field elements in a generated PDF form. This demo illustrates several common form field customizations, such as adding a short annotation under a form field, changing a form field's size, and using a different renderer for a question. To download the customized form, scroll the survey down to the bottom and click the "Save as PDF" button.

To customize form fields, handle the onRenderQuestion event, which is raised once for each survey question. A handling function accepts a SurveyPDF instance as the first parameter and an options object with the following properties as the second parameter:

• options.question
  A survey question that is being rendered.

• options.bricks
  An array of PDF bricks used to render the question. Bricks are simple elements with specified content, size, and location. They are fundamental elements used to construct a PDF document. You can modify the bricks to customize rendering.

• options.point
  An object with coordinates of the top-left corner of the element being rendered. This object contains the following properties: { xLeft: number, yTop: number }.

• options.controller
  A DocController object that provides access to main PDF document properties (font, margins, page width and height) and allows you to modify them.

• options.repository
  A repository with classes that render elements to PDF. Use its create method to create a rendering class instance that you can then use to generate PDF bricks.

Refer to the code listings for examples of using the onRenderQuestion event and its parameters.

If the default question renderer doesn't suit your needs, register a different renderer. For instance, the following code registers the FlatQuestionDefault renderer for the "comment" question type to render Long Text (Comment) questions as plain text:

import { FlatRepository, FlatQuestionDefault } from "survey-pdf";

FlatRepository.register("comment", FlatQuestionDefault);