As of version 32.0.2, it is possible to save documents and thus to merge the values of the form fields that have been filled in. Users can fill in form fields when documents with form fields are deployed through the Document Viewer.

Completing forms with TX Text Control

Export Values Only

A JavaScript function is available for the export of the form field values in the form of a JSON object.

var formFieldValues = TXDocumentViewer.forms.getValues()
view raw test.js hosted with ❤ by GitHub

All of the values in the form fields will be exported as shown in the following JSON string:

[
{
"name": "insurance_check",
"type": "checkbox",
"value": true
},
{
"name": "insurance_name",
"type": "selection",
"value": "Health Providers"
},
{
"name": "insurance_date",
"type": "date",
"value": "2023-10-18"
},
{
"name": "insurance_state",
"type": "selection",
"value": "North Carolina"
},
{
"name": "notes",
"type": "text",
"value": "Additional notes"
}
]
view raw test.json hosted with ❤ by GitHub

Save Document

As of version 32.0.2, the saveDocument method can be used to save the document in a supported format, including the merged form field values.

const saveSettings = { mergeFormFields: true, embedAnnotations: false };
const result = await TXDocumentViewer.saveDocument(
TXDocumentViewer.StreamType.InternalUnicodeFormat,
saveSettings);
view raw test.js hosted with ❤ by GitHub

This returns a DownloadDocumentResult object with asynchronous functions to retrieve the document as a base64-encoded string or as an ArrayBuffer. The base64-encoded string is then retrieved using the following code.

const base64 = await result.base64();
view raw test.js hosted with ❤ by GitHub

Sending the Document to a Web API

The following JavaScript code shows how to save the document and send it to a Web API endpoint called receiveDocument.

async function saveDocument() {
try {
const saveSettings = { mergeFormFields: true, embedAnnotations: false };
const result = await TXDocumentViewer.saveDocument(
TXDocumentViewer.StreamType.InternalUnicodeFormat,
saveSettings);
const base64 = await result.base64();
const data = { document: base64 };
const { success, error } = await saveDocumentAjax(data);
if (success) {
alert("Document saved.");
} else {
alert("Error saving document.");
}
} catch (error) {
console.error("An error occurred:", error);
}
}
async function saveDocumentAjax(data) {
return new Promise((resolve) => {
$.ajax({
type: "POST",
url: "/Home/receiveDocument",
data: data,
success: (data) => resolve({ success: true, data }),
error: (xhr, ajaxOptions, thrownError) => resolve({ success: false, error: thrownError }),
});
});
}
view raw test.js hosted with ❤ by GitHub

The Web API method then loads the document into a ServerTextControl to save it as a PDF.

[HttpPost]
public IActionResult ReceiveDocument(string document)
{
using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
{
tx.Create();
tx.Load(Convert.FromBase64String(document), TXTextControl.BinaryStreamType.InternalUnicodeFormat);
tx.Save("document.pdf", TXTextControl.StreamType.AdobePDF);
}
return Ok();
}
view raw test.cs hosted with ❤ by GitHub

Processing PDF Form Fields

Processing form fields in PDF documents when loaded by PDF.js is a special case. When a PDF document is loaded into the Document Viewer, form fields can be filled in. The document can then be saved back to PDF with the merged form field values using the saveDocument method.

Based on the example above, the following code would save the PDF document and send it to a Web API endpoint.

const result = await TXDocumentViewer.saveDocument(
TXDocumentViewer.StreamType.AdobePDF,
saveSettings);
view raw test.js hosted with ❤ by GitHub

The document is retrieved server-side and physically saved as PDF.

[HttpPost]
public IActionResult ReceiveDocument(string document)
{
// convert string to byte array and save as file
System.IO.File.WriteAllBytes("document.pdf", Convert.FromBase64String(document));
return Ok();
}
view raw test.cs hosted with ❤ by GitHub