PDF Form Settings

PDF forms created with SurveyJS PDF Generator can have various settings and configurations depending on your needs and requirements. This help topic describes how to specify PDF page settings (orientation, size, margins), change fonts, create a read-only PDF form, and compress a PDF document to reduce its size.

SurveyJS PDF Generator can create PDF documents with portrait or landscape orientation. To change page orientation, set the orientation property to "p" (portrait, default) or "l" (landscape):

const pdfDocOptions = {
  orientation: "l" // or "p"
};

const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);

Generated PDF documents support predefined page sizes (for instance, "a3", "letter", "credit-card") and allow you to define a custom page size in millimeters. Specify the format property to set the desired page size. Refer to the property description for a full list of supported page size types. If you do not specify this property, generated PDF documents use the A4 page size.

const pdfDocOptions = {
  // A predefined page format
  format: "a2"
  // A custom page size in millimeters: [width, height]
  format: [210, 297]
};

const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);

Use the margins property to specify page margins. This property accepts an object with fields that specify the top, bottom, left, and right page margins in millimeters. Increase the top and bottom margins if you plan to add header and footer to your PDF form.

const pdfDocOptions = {
  top: 10,
  bot: 10,
  left: 15,
  right: 15
};

const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);

Any PDF document supports a set of standard 14 fonts. They are available in most PDF viewers and ensure consistent document representation on any device. The standard 14 fonts include the following fonts and their variants:

• Helvetica | Helvetica-Bold | Helvetica-BoldOblique | Helvetica-Oblique
• Courier | Courier-Bold | Courier-BoldOblique | Courier-Oblique
• Times-Roman | Times-Bold | Times-Italic | Times-BoldItalic
• Symbol
• ZapfDingbats

SurveyJS PDF Generator supports these fonts out of the box. To apply one of them, specify the fontName property. The default font is Helvetica.

const pdfDocOptions = {
  fontName: "Helvetica" // or "Courier" | "Times" | "Symbol" | "ZapfDingbats"
};

const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);

You can also use custom fonts in your PDF document. Unlike the standard fonts, custom fonts are embedded in the document and increase its size. To add a custom font, call the DocController.addFont(fontName, base64, fontStyle) method with the following parameters:

• fontName: string
  A custom name that you will use to apply a custom font.
• base64: string
  The custom font as a Base64-encoded string. To encode your font to Base64, obtain it as a TTF file and use any TTF-to-Base64 online converter.
• fontStyle: "normal" | "bold" | "italic" | "bolditalic"
  The style of the custom font.

To apply a custom font to a PDF document, assign its name to the fontName property. This setting applies a custom font to all survey questions except HTML. To include HTML questions too, enable the useCustomFontInHtml property.

View Demo

Use the fontSize property to specify the font size in points. The sizes of titles, descriptions, and other text elements will be scaled proportionally based on the fontSize value.

const pdfDocOptions = {
  fontSize: 16
};

const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);

Editable PDF forms allow respondents to fill in form fields: enter text in text boxes, select items from drop-down lists, radio button groups, or checkbox questions, and so on. Respondents can save a filled-in PDF form and send it you for further processing. Editable PDF documents use Adobe AcroForms. SurveyJS PDF Generator creates editable PDF documents by default.

If you do not want users to fill in your PDF form, generate it in read-only mode. In this mode, form fields are non-interactive. You can pre-fill a read-only PDF form with user responses if required. Read-only PDF documents have smaller size because they do not use Adobe AcroForms.

To generate a read-only PDF form, set the mode property on a SurveyPDF instance to "display". To pre-fill your form with user responses, assign a data object to SurveyPDF's data property. This is the same object saved in the data property of a SurveyModel instance.

const surveyJson = { ... };
const survey = new Survey.Model(surveyJson);

const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);
surveyPdf.mode = "display";
surveyPdf.data = survey.data;

// In modular applications:
import { Model } from "survey-core";
import { SurveyPDF } from "survey-pdf";

const surveyJson = { ... };
const survey = new Model(surveyJson);

const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);
surveyPdf.mode = "display";
surveyPdf.data = survey.data;

View Demo

If you need to reduce the size of a PDF document, you can compress it. Compressed documents do not support AcroForms and custom fonts. Enable the compress property to create a compressed PDF document:

const pdfDocOptions = {
  compress: true
};

const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);