HelpBot Assistant

How can I help you?

Import PDF Form Data into MVC PDF Viewer

11 Feb 20263 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 you’re using a server-backed viewer, include .ServiceUrl(...) in the helper so the viewer can access server APIs during import/export.

Import FDF

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render()
</div>

<button id="importFdf">Import FDF</button>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    document.getElementById('importFdf').addEventListener('click', function () {
      // The file for importing should be accessible at the given path or provided as a stream
      viewer.importFormFields('File', "Fdf");
    });
  });
</script>

Import XFDF

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render()
</div>

<button id="importXfdf">Import XFDF</button>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    document.getElementById('importXfdf').addEventListener('click', function () {
      viewer.importFormFields('File', "Xfdf");
    });
  });
</script>

Import JSON

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render()
</div>

<button id="importJson">Import JSON</button>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    document.getElementById('importJson').addEventListener('click', function () {
      viewer.importFormFields('File', "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