Export PDF Form Data from Vue PDF Viewer

28 Jul 20267 minutes to read

The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:

Available methods

How to export

Use exportFormFields() with an optional destination path and the format type.

Export as FDF

The following example exports form field data as FDF.

<template>
  <div>
    <button @click="exportFdf">Export 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: {
    exportFdf() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Destination is optional; if omitted, the browser prompts the user to save the file.
      pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
    }
  }
};
</script>

Export as XFDF

The following example exports form field data as XFDF.

<template>
  <div>
    <button @click="exportXfdf">Export 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: {
    exportXfdf() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
    }
  }
};
</script>

Export as JSON

The following example exports form field data as JSON.

<template>
  <div>
    <button @click="exportJson">Export 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: {
    exportJson() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
    }
  }
};
</script>

Export as Object

Use exportFormFieldsAsObject() to obtain form data as a JavaScript object for database or API integration.

<template>
  <div>
    <button @click="exportObj">Export Object</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',
      exportedData: null
    };
  },
  methods: {
    exportObj() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
        this.exportedData = data; // Persist or send to server
        console.log('Exported object:', this.exportedData);
      });
    }
  }
};
</script>

Common use cases

  • Save user-entered data to your server without altering the original PDF.
  • Export as JSON for REST API integration.
  • Export as FDF/XFDF for compatibility with other PDF tools.
  • Export as Object to merge with app state or store securely.
  • Automate exports after validation using validateFormFields()

View Sample on GitHub

See also