Syncfusion AI Assistant

How can I help you?

Import PDF Form Data into Vue PDF Viewer

28 Feb 20266 minutes to read

The PDF Viewer lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:

API to use

NOTE

If a server-backed viewer is used, set serviceUrl before importing.

Import FDF

The following Vue example imports FDF data into the currently loaded PDF.

<template>
  <div>
    <button @click="importFdf">Import FDF</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',
    };
  },
  methods: {
    importFdf() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // The file for importing should be accessible at the given path or as a file stream depending on your integration
      pdfviewer.importFormFields('File', FormFieldDataFormat.Fdf);
    }
  }
};
</script>

Import XFDF

The following example imports XFDF data.

<template>
  <div>
    <button @click="importXfdf">Import XFDF</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',
    };
  },
  methods: {
    importXfdf() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // The file for importing should be accessible at the given path or as a file stream depending on your integration
      pdfviewer.importFormFields('File', FormFieldDataFormat.Xfdf);
    }
  }
};
</script>

Import JSON

The following example imports JSON form data.

<template>
  <div>
    <button @click="importJson">Import JSON</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',
    };
  },
  methods: {
    importJson() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // The file for importing should be accessible at the given path or as a file stream depending on your integration
      pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
    }
  }
};
</script>

Common Use Cases

  • Pre-fill application forms from a database using JSON.
  • Migrate data from other PDF tools using FDF/XFDF.
  • Restore user progress saved locally or on the server.
  • Combine with validation to block print/download until required fields are completed.

View Sample on GitHub

See also