Export and import form field data in Blazor SfPdfViewer
17 Jul 202614 minutes to read
The SfPdfViewer control supports exporting and importing form field data in the following formats:
- XML
- FDF
- XFDF
- JSON
- Object-based
The ExportFormFieldsAsync and ImportFormFieldsAsync methods export or import form field data as a stream, which can be applied to another PDF document.
Supported Export and Import Formats
Export and import as XML
Exports form field data in XML format and allows importing the same data back into a PDF document.
NOTE
Setting FormFieldDataFormat to Xml exports or imports form field data in XML format.
The following code shows how to export the form fields as an XML data stream and import that data from the stream into the current PDF document via a button click.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfButton OnClick="ExportFormFieldData">Export Data</SfButton>
<SfButton OnClick="ImportFormFieldData">Import Data</SfButton>
<SfPdfViewer2 @ref="PdfViewerInstance" DocumentPath="wwwroot/data/Form_Filling_Document_With_Data.pdf"
Height="650px"
Width="100%">
</SfPdfViewer2>
@code {
// Reference to the SfPdfViewer2 instance
private SfPdfViewer2 PdfViewerInstance { get; set; }
// Stream to store exported XML form field data
Stream XMLStream = new MemoryStream();
// List to store form field information
List<FormFieldInfo> FormFields = new List<FormFieldInfo>();
// Exports form field data from the PDF viewer to an XML stream
private async Task ExportFormFieldData()
{
if (PdfViewerInstance != null)
{
// Retrieve form field information from the PDF viewer
FormFields = await PdfViewerInstance.GetFormFieldsAsync();
if (FormFields != null && FormFields.Count > 0)
{
// Export data to XML format
XMLStream = await PdfViewerInstance.ExportFormFieldsAsync(FormFieldDataFormat.Xml);
}
}
}
// Imports form field data from the XML stream into the PDF viewer
private async Task ImportFormFieldData()
{
if (PdfViewerInstance != null && XMLStream != null)
{
// Reset the stream position before importing
XMLStream.Position = 0;
// Import XML data into the viewer
await PdfViewerInstance.ImportFormFieldsAsync(XMLStream, FormFieldDataFormat.Xml);
}
}
}
Export and import as FDF
Exports form field data in Forms Data Format (FDF) and allows importing the same data back into a PDF document.
NOTE
Setting FormFieldDataFormat to Fdf exports or imports form field data in FDF format.
The following code demonstrates exporting form fields as FDF to a stream and importing the data back into the current PDF document through a button click.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfButton OnClick="ExportFormFieldData">Export Data</SfButton>
<SfButton OnClick="ImportFormFieldData">Import Data</SfButton>
<SfPdfViewer2 @ref="PdfViewerInstance" DocumentPath="wwwroot/data/Form_Filling_Document_With_Data.pdf"
Height="650px"
Width="100%">
</SfPdfViewer2>
@code {
// Reference to the SfPdfViewer2 instance
private SfPdfViewer2 PdfViewerInstance { get; set; }
// Stream to store exported form field data in FDF format
Stream FDFStream = new MemoryStream();
// List to store form field information
List<FormFieldInfo> FormFields = new List<FormFieldInfo>();
// Exports form field data from the PDF viewer in FDF format
private async Task ExportFormFieldData()
{
if (PdfViewerInstance != null)
{
// Retrieve form field information from the PDF viewer
FormFields = await PdfViewerInstance.GetFormFieldsAsync();
if (FormFields != null && FormFields.Count > 0)
{
// Export form fields as FDF data
FDFStream = await PdfViewerInstance.ExportFormFieldsAsync(FormFieldDataFormat.Fdf);
}
}
}
// Imports form field data from FDF format into the PDF viewer
private async Task ImportFormFieldData()
{
if (PdfViewerInstance != null && FDFStream != null)
{
// Reset the stream position before importing
FDFStream.Position = 0;
// Import FDF data into the viewer
await PdfViewerInstance.ImportFormFieldsAsync(FDFStream, FormFieldDataFormat.Fdf);
}
}
}
Export and import as XFDF
Similar to FDF, but in XML-based format, XFDF ensures structured data handling for form fields.
NOTE
Setting FormFieldDataFormat to Xfdf exports or imports form field data in XFDF format.
The following code shows how to export the form fields as an XFDF data stream and import that data from the stream into the current PDF document via a button click.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfButton OnClick="ExportFormFieldData">Export Data</SfButton>
<SfButton OnClick="ImportFormFieldData">Import Data</SfButton>
<SfPdfViewer2 @ref="PdfViewerInstance" DocumentPath="wwwroot/data/Form_Filling_Document_With_Data.pdf"
Height="650px"
Width="100%">
</SfPdfViewer2>
@code {
// Reference to the SfPdfViewer2 instance
private SfPdfViewer2 PdfViewerInstance { get; set; }
// Stream to store exported XFDF form field data
Stream XFDFStream = new MemoryStream();
// List to store form field information
List<FormFieldInfo> FormFields = new List<FormFieldInfo>();
// Exports form field data from the PDF viewer to an XFDF stream
private async Task ExportFormFieldData()
{
if (PdfViewerInstance != null)
{
// Retrieve form field information from the PDF viewer
FormFields = await PdfViewerInstance.GetFormFieldsAsync();
if (FormFields != null && FormFields.Count > 0)
{
// Export data to XFDF format
XFDFStream = await PdfViewerInstance.ExportFormFieldsAsync(FormFieldDataFormat.Xfdf);
}
}
}
// Imports form field data from the XFDF stream into the PDF viewer
private async Task ImportFormFieldData()
{
if (PdfViewerInstance != null && XFDFStream != null)
{
// Reset the stream position before importing
XFDFStream.Position = 0;
// Import XFDF data into the viewer
await PdfViewerInstance.ImportFormFieldsAsync(XFDFStream, FormFieldDataFormat.Xfdf);
}
}
}
Export and import as JSON
Exports form field data in JSON format, which can be easily read and imported back into the PDF Viewer.
NOTE
Setting FormFieldDataFormat to Json exports or imports form field data in JSON format.
The following code demonstrates exporting form fields as JSON to a stream and importing the data back into the current PDF document through a button click.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfButton OnClick="ExportFormFieldData">Export Data</SfButton>
<SfButton OnClick="ImportFormFieldData">Import Data</SfButton>
<SfPdfViewer2 @ref="PdfViewerInstance" DocumentPath="wwwroot/data/Form_Filling_Document_With_Data.pdf"
Height="650px"
Width="100%">
</SfPdfViewer2>
@code {
// Reference to the SfPdfViewer2 instance
private SfPdfViewer2 PdfViewerInstance { get; set; }
// Stream to store exported form field data in JSON format
Stream JSONStream = new MemoryStream();
// List to store form field information
List<FormFieldInfo> FormFields = new List<FormFieldInfo>();
// Exports form field data from the PDF viewer in JSON format
private async Task ExportFormFieldData()
{
if (PdfViewerInstance != null)
{
// Retrieve form field information from the PDF viewer
FormFields = await PdfViewerInstance.GetFormFieldsAsync();
if (FormFields != null && FormFields.Count > 0)
{
// Export form fields as JSON data
JSONStream = await PdfViewerInstance.ExportFormFieldsAsync(FormFieldDataFormat.Json);
}
}
}
// Imports form field data from JSON format into the PDF viewer
private async Task ImportFormFieldData()
{
if (PdfViewerInstance != null && JSONStream != null)
{
// Reset the stream position before importing
JSONStream.Position = 0;
// Import JSON data into the viewer
await PdfViewerInstance.ImportFormFieldsAsync(JSONStream, FormFieldDataFormat.Json);
}
}
}
Export and import as an object
Form fields can be exported and imported as an object, which is useful for in-memory processing and quick data manipulation.
The ExportFormFieldsAsObjectAsync and ImportFormFieldsAsync methods allow you to export the form field data as an Object, which can later be used to import the saved data into another PDF document.
The following code shows how to export form fields as an object and import that data into the current PDF document via a button click.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfButton OnClick="ExportFormFieldData">Export Data</SfButton>
<SfButton OnClick="ImportFormFieldData">Import Data</SfButton>
<SfPdfViewer2 @ref="PdfViewerInstance" DocumentPath="wwwroot/data/Form_Filling_Document_With_Data.pdf"
Height="650px"
Width="100%">
</SfPdfViewer2>
@code {
// Reference to the SfPdfViewer2 instance
private SfPdfViewer2 PdfViewerInstance { get; set; }
// Dictionary to store exported form field data as key-value pairs
Dictionary<string, string> FormFieldsObject = new Dictionary<string, string>();
// List to store form field information
List<FormFieldInfo> FormFields = new List<FormFieldInfo>();
// Exports form field data from the PDF viewer as an object (key-value pairs)
private async Task ExportFormFieldData()
{
if (PdfViewerInstance != null)
{
// Retrieve form field information
FormFields = await PdfViewerInstance.GetFormFieldsAsync();
if (FormFields != null && FormFields.Count > 0)
{
// Export form fields as an object
FormFieldsObject = await PdfViewerInstance.ExportFormFieldsAsObjectAsync();
}
}
}
// Imports form field data from an object into the PDF viewer
private async Task ImportFormFieldData()
{
if (PdfViewerInstance != null && FormFieldsObject != null && FormFieldsObject.Count > 0)
{
// Import object data into the viewer
await PdfViewerInstance.ImportFormFieldsAsync(FormFieldsObject);
}
}
}
Export as JSON file
This method allows exporting the form field data and saving it as a JSON file, which can be stored or shared for future use.
NOTE
If ExportFormFieldsAsync is called with a string path (file name or path), the form field data is exported in JSON file format.
@using Syncfusion.Blazor.SfPdfViewer;
@using Syncfusion.Blazor.Buttons;
<SfButton OnClick="ExportFormFieldData">Export Data</SfButton>
<SfPdfViewer2 @ref="PdfViewerInstance" DocumentPath="wwwroot/data/Form_Filling_Document_With_Data.pdf"
Height="650px"
Width="100%">
</SfPdfViewer2>
@code {
// Reference to the SfPdfViewer2 instance
private SfPdfViewer2 PdfViewerInstance { get; set; }
// Exports form field data from the PDF viewer into a JSON file
private async Task ExportFormFieldData()
{
if (PdfViewerInstance != null)
{
// Exports form fields and saves them as a JSON file
await PdfViewerInstance.ExportFormFieldsAsync("FormData.json");
}
}
}
Additionally, the component provides a built-in Submit button that exports form field data as a JSON file directly from the PDF document.
