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.
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() |
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" | |
} | |
] |
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); |
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(); |
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 }), | |
}); | |
}); | |
} |
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(); | |
} |
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); |
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(); | |
} |