Form Fields API in Vue PDF Viewer

3 Aug 202624 minutes to read

The Vue PDF Viewer provides APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:

API	Description
updateFormFieldsValue	Updates the value for one or more form fields.
updateFormFields	Updates the properties of one or more form fields.
retrieveFormFields	Retrieves all form fields or by specific criteria.
resetFormFields	Resets the specified or all form fields to their default values.
importFormFields	Imports values and states for form fields from a JSON object or file stream.
focusFormField	Sets focus to a form field by name or ID.
exportFormFieldsAsObject	Exports form fields as a JSON object.
exportFormFields	Exports form fields as a downloadable file.
clearFormFields	Clears values of specified or all form fields without removing them.
isFormFieldDocument	Indicates whether the loaded document contains form fields.
isFormDesignerToolbarVisible	Gets whether the Form Designer toolbar is currently visible.
formFieldCollections	Gets the collection of current form fields with their properties.
enableFormFieldsValidation	Enables or disables form field validation.
enableFormFields	Enables or disables interaction with form fields.
enableFormDesignerToolbar	Shows or hides the Form Designer toolbar.

updateFormFieldsValue

Updates the value of one or more form fields programmatically.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="updateFormFields">updateFormFields</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
  import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer],
  },
  mounted() {
    const btn = document.getElementById('updateFormFields');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        const fields = pdfviewer.retrieveFormFields();
        const field = fields.find((f) => f.name === 'First Name') || fields[0];
        if (field) {
          field.value = 'John Doe';
          field.tooltip = 'First';
          pdfviewer.updateFormFieldsValue(field);
        }
      };
    }
  },
};
</script>

updateFormFields

Updates form field properties such as bounds, color, font, isReadOnly, required, and more.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="updateFormFields">updateFormFields</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('updateFormFields');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        const fields = pdfviewer.retrieveFormFields();
        const field = fields.find((f) => f.name === 'First Name') || fields[0];
        if (field) {
          pdfviewer.formDesignerModule.updateFormField(field, {
            value: 'John',
            fontFamily: 'Courier',
            fontSize: 12,
            color: 'black',
            backgroundColor: 'white',
            borderColor: 'black',
            thickness: 2,
            alignment: 'Left',
            maxLength: 50,
          });
        }
      };
    }
  },
};
</script>

retrieveFormFields

Retrieves all form fields and their properties or filters by type/name.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="retrieveFormFields">retrieveFormFields</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('retrieveFormFields');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        const fields = pdfviewer.retrieveFormFields();
        console.log(fields);
      };
    }
  },
};
</script>

resetFormFields

Resets specified form fields or all fields to their default values.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="resetFormFields">resetFormFields</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('resetFormFields');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        pdfviewer.resetFormFields();
      };
    }
  },
};
</script>

importFormFields

Imports form field data from an object or file into the current document.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="importFormFields">importFormFields</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';
import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('importFormFields');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
      };
    }
  },
};
</script>

focusFormField

Moves focus to a form field by name or ID.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="focusFormField">focusFormField</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('focusFormField');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        pdfviewer.focusFormField('FirstName');
      };
    }
  },
};
</script>

exportFormFieldsAsObject

Exports current form field values and states as a JSON object.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';
import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('exportFormFieldsAsObject');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then((data) => {
          console.log('Exported object:', data);
        });
      };
    }
  },
};
</script>

exportFormFields

Exports form field data to a file for download.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="exportFormFields">exportFormFields</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';
import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('exportFormFields');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
      };
    }
  },
};
</script>

clearFormFields

Clears values of specified or all fields without removing the fields themselves.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="clearFormFields">clearFormFields</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const btn = document.getElementById('clearFormFields');
    if (btn) {
      btn.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        const field = pdfviewer.retrieveFormFields();
        pdfviewer.clearFormFields(field[0]);
      };
    }
  },
};
</script>

isFormFieldDocument

Returns true if the loaded document contains one or more form fields.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="checkFormFieldDocument">checkFormFieldDocument</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const element = document.getElementById('checkFormFieldDocument');
    if (element) {
      element.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        console.log(pdfviewer.isFormFieldDocument);
      };
    }
  },
};
</script>

isFormDesignerToolbarVisible

Gets whether the Form Designer toolbar is currently visible.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" @documentLoad="onDocumentLoad" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Open the Form Designer toolbar and read its visibility state
      pdfviewer.enableFormDesignerToolbar(true);
      console.log(pdfviewer.isFormDesignerToolbarVisible);
    },
  },
};
</script>

formFieldCollections

Gets the current collection of form fields with their properties from the viewer instance.

<button id="formfieldcollection">formfieldcollection</button>

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="formfieldcollection">formfieldcollection</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const element = document.getElementById('formfieldcollection');
    if (element) {
      element.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        console.log(pdfviewer.formFieldCollections);
      };
    }
  },
};
</script>

enableFormFieldsValidation

Enables or disables built-in validation for required and constrained fields.

Composition API (~/src/App.vue)

<template>
  <div>
    <button id="checkFormFieldDocument">checkFormFieldDocument</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  mounted() {
    const element = document.getElementById('checkFormFieldDocument');
    if (element) {
      element.onclick = () => {
        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
        console.log(pdfviewer.isFormFieldDocument);
      };
    }
  },
};
</script>
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      pdfviewer.enableFormFieldsValidation = true;
    },
  },
};
</script>

enableFormFields

Enables or disables user interaction with form fields globally.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" @documentLoad="onDocumentLoad" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      pdfviewer.enableFormFields = false; // Disable interaction with all fields
    },
  },
};
</script>

enableFormDesignerToolbar

Shows or hides the Form Designer toolbar at runtime.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" @documentLoad="onDocumentLoad" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      pdfviewer.enableFormDesignerToolbar(true); // show
      // pdfviewer.enableFormDesignerToolbar(false); // hide
    },
  },
};
</script>

See also

• Form Designer overview
• Form Designer Toolbar
• Create form fields
• Edit form fields
• Group form fields
• Add custom data to form fields
• Form Constrain
• Form fields Validation