Form filling in Vue PDF Viewer

The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.

The PDF Viewer supports the following form field types:

  • Text box
  • Password
  • Check box
  • Radio button
  • List box
  • Dropdown
  • Signature field
  • Initial field

Form filling in Vue PDF Viewer

Disabling form fields

The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.

<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer"
                   :documentPath="documentPath"
                   :resourceUrl="resourceUrl"
                   :enableFormDesigner="false">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>

import {
  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide } from 'vue';

const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
  TextSelection, TextSearch, FormFields, FormDesigner]);

</script>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer"
                   :documentPath="documentPath"
                   :resourceUrl="resourceUrl"
                   :enableFormDesigner="false">
    </ejs-pdfviewer>
  </div>
</template>

<script>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
  ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  components: {
    "ejs-pdfviewer": PdfViewerComponent
  },
  data() {
    return {
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView,
      TextSelection, TextSearch, FormFields, FormDesigner]
  }
};

</script>

Add a handwritten signature to a signature field

Add a handwritten signature to a signature field by following these steps:

  • Click the signature field in the PDF document to open the signature panel.

Signature field in Vue PDF Viewer

  • Draw the signature in the signature panel.

Signature panel in Vue PDF Viewer

  • Select CREATE. The drawn signature is added to the signature field.

Signature added in Vue PDF Viewer

Delete a signature from a signature field

Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.

Deleting a signature in Vue PDF Viewer

Export and import form fields

The PDF Viewer supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods. The following formats are supported:

  • FDF
  • XFDF
  • JSON

For more information, see the Form fields documentation.

See also