formFields Property (original) (raw)
Summary
Object that manages the form fields of the document.
Syntax
Object.defineProperty(LEADDocument.prototype, 'formFields',
get: function()
)
Property Value
The DocumentFormFields object that manages the form fields of this LEADDocument Class.
Example
DocumentFormFields.ts
ViewerInitializer.ts
DocumentFormFields.js
ViewerInitializer.js
DocumentFormFields.html
examples.css
import { ViewerInitializer } from "../../utilities/ViewerInitializer";
import { documentViewer } from "../../utilities/ViewerInitializer";
export class DocumentFormFields {
public run = () => {
new ViewerInitializer();
}
getData() {
var doc = documentViewer.document;
documentViewer.prepareToSave();
if (doc.formFields.hasFormFields) {
var containers: lt.Document.DocumentFormFieldsContainer[] = doc.formFields.getFormFields();
//This will loop all the fields and change the values of the DocumentTextFormFields to 'LEADTOOLS PDF Forms', uncomment the below code to see it in action
// for (let i = 0; i < containers.length; i++) {
// for (let j = 0; j < containers[i].children.count; j++) {
// if (containers[i].children.item(j) != null && containers[i].children.item(j).type == "DocumentTextFormField") {
// containers[i].children.item(j).value = "LEADTOOLS PDF Forms";
// }
// }
// }
//Loops through on all the pages and fields of each page and outputs the results in the console
for (let i = 0; i < containers.length; i++) {
for (let j = 0; j < containers[i].children.count; j++) {
console.log(`-------------------------- Page <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>i</mi><mo>+</mo><mn>1</mn></mrow><mo>−</mo><mi>F</mi><mi>i</mi><mi>e</mi><mi>l</mi><mi>d</mi></mrow><annotation encoding="application/x-tex">{i + 1} - Field </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7429em;vertical-align:-0.0833em;"></span><span class="mord"><span class="mord mathnormal">i</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mord">1</span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">−</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord mathnormal" style="margin-right:0.13889em;">F</span><span class="mord mathnormal">i</span><span class="mord mathnormal">e</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal">d</span></span></span></span>{j + 1} ---------------------------------`)
console.log(`ID: ${containers[i].children.item(j).id}`);
console.log(`Name: ${containers[i].children.item(j).name}`);
console.log(`Bounds: ${containers[i].children.item(j).bounds}`);
console.log(`Background color: ${containers[i].children.item(j).backgroundColor}`);
console.log(`Printable: ${containers[i].children.item(j).printable}`);
console.log(`Viewable: ${containers[i].children.item(j).viewable}`);
console.log(`Locked: ${containers[i].children.item(j).locked}`);
console.log(`Required: ${containers[i].children.item(j).required}`);
console.log(`Read Only: ${containers[i].children.item(j).readOnly}`);
console.log(`Border Style: ${containers[i].children.item(j).borderStyle.style}`);
console.log(`Border Color: ${containers[i].children.item(j).borderStyle.color}`);
console.log(`Border Width: ${containers[i].children.item(j).borderStyle.width}`);
console.log(`Font Name: ${containers[i].children.item(j).textStyle.fontName}`);
console.log(`Font Size: ${containers[i].children.item(j).textStyle.fontSize}`);
console.log(`Font Color: ${containers[i].children.item(j).textStyle.color}`);
console.log(`Font Alignment: ${containers[i].children.item(j).textStyle.textAlignment}`);
console.log(`Type: ${containers[i].children.item(j).type}`);
if (containers[i].children.item(j).type == "DocumentTextFormField") {
console.log(`Value: ${containers[i].children.item(j).value}`)
console.log(`Content Type: ${containers[i].children.item(j).contentType}`);
console.log(`Max Length: ${containers[i].children.item(j).maxLength}`)
console.log(`Multi-Line: ${containers[i].children.item(j).multiline}`)
console.log(`Password: ${containers[i].children.item(j).isPassword}`)
console.log(`Comb: ${containers[i].children.item(j).isComb}`)
}
if (containers[i].children.item(j).type == "DocumentChoiceFormField") {
console.log(`Options Display Value: ${containers[i].children.item(j).optionsDisplayValue}`)
console.log(`Options Exported Value: ${containers[i].children.item(j).optionsExportedValue}`);
console.log(`Selected Indices: ${containers[i].children.item(j).selectedIndices}`)
console.log(`Multi-Select: ${containers[i].children.item(j).multiSelect}`)
console.log(`Choice Type: ${containers[i].children.item(j).choiceType}`)
}
if (containers[i].children.item(j).type == "DocumentButtonFormField") {
console.log(`Checked: ${containers[i].children.item(j).isChecked}`)
if (containers[i].children.item(j).buttonType == 0) {
console.log(`Button Type: Check Box`);
} else {
console.log(`Button Type: Radio Button`);
}
}
}
}
}
else {
console.log("This document does not have PDF Form Fields")
}
}
}
export var documentViewer: lt.Document.Viewer.DocumentViewer = null;
export class ViewerInitializer {
private callback: (viewer: lt.Document.Viewer.DocumentViewer) => void = null;
constructor(callback?: (viewer: lt.Document.Viewer.DocumentViewer) => void) {
this.callback = callback;
this.init();
}
public static showServiceError = (jqXHR: any, statusText: any, errorThrown: any) => {
alert('Error returned from service. See the console for details.')
const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
private init = () => {
this.setLicense();
this.initFactory();
this.createDocumentViewer();
}
// Set the LEADTOOLS Evaluation license
setLicense = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) {
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
} else {
var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license.";
alert(msg);
console.log(msg);
}
});
}
// Before we call the service, we need to explain where it is ("localhost:40000/api", for example):
initFactory = () => {
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}";
lt.Document.DocumentFactory.verifyService()
.done(function (response: ResponseType | any) {
var serviceInfo = "Service name: '" + response.serviceName + "'";
serviceInfo += " version: '" + response.serviceVersion + "'";
serviceInfo += " platform: '" + response.servicePlatform + "'";
serviceInfo += " OS: '" + response.serviceOperatingSystem + "'";
lt.LTHelper.log(serviceInfo);
})
.fail(function (jqXHR: string, statusText: string, errorThrown: string) {
var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application.";
window.alert(errMsg);
console.log(errMsg);
});
}
private createDocumentViewer = () => {
// Create the options object for the DocumentViewer
var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
createOptions.viewCreateOptions.useElements = true;
createOptions.thumbnailsCreateOptions.useElements = false;
// Set viewContainer to #documentViewer
createOptions.viewContainer = document.getElementById("content");
// Create the document viewer
documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// We prefer SVG viewing over Image viewing for this example
documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// To use Image: lt.Document.Viewer.DocumentViewerItemType.image;
documentViewer.view.imageViewer.autoCreateCanvas = true;
this.loadDefaultDoc(documentViewer)
}
private loadDefaultDoc = (viewer: lt.Document.Viewer.DocumentViewer) => {
var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";
var loadDocumentOptions = new lt.Document.LoadDocumentOptions();
loadDocumentOptions.loadFormFieldsMode = 1;
// Call the "LoadFromUri" and pass success and failure callbacks to the promise
lt.Document.DocumentFactory.loadFromUri(url, loadDocumentOptions)
.done((document: lt.Document.LEADDocument) => {
const ready = () => {
documentViewer.setDocument(document);
this.registerClickEvents();
if (document.formFields.hasFormFields) {
console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information")
} else {
console.log("This document does not have PDF Form Fields")
}
}
if (document.isStructureSupported && !document.structure.isParsed)
document.structure.parse()
.done(ready)
.fail(ViewerInitializer.showServiceError);
else
ready();
})
.fail((ViewerInitializer.showServiceError));
}
//Initialize the onclick events for our two buttons
registerClickEvents = () => {
const importClick = document.getElementById('importBtn');
importClick.onclick = (e) => {
this.selectAndLoadFile();
}
}
selectAndLoadFile() {
//creates an input element on the Import Document button to upload files
//into the document editor
var input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.accept = '.doc, .docx, .pdf, .rtf, .txt';
input.onchange = function (e) {
var files = input.files;
if (!files || !files.length)
return;
var file = files[0];
//Set the cursor to an idle animations
document.body.style.cursor = 'wait';
//Create the document loading options
const loadDocumentOptions = new lt.Document.LoadDocumentOptions();
loadDocumentOptions.loadFormFieldsMode = 1;
//load the document from a file using the options
lt.Document.DocumentFactory.loadFromFile(file, loadDocumentOptions)
.then((doc: lt.Document.LEADDocument) => {
//set the new document in the document viewer
documentViewer.setDocument(doc);
//check to see if the document has form fields
if (doc.formFields.hasFormFields) {
console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information")
}
else {
console.log("This document does not have PDF Form Fields")
}
})
//return the cursor to default
document.body.style.cursor = 'default';
};
input.click();
}
}
import { ViewerInitializer } from "../../utilities/ViewerInitializer";
import { documentViewer } from "../../utilities/ViewerInitializer";
export class DocumentFormFields {
run = () => {
new ViewerInitializer();
}
getData() {
var doc = documentViewer.document;
documentViewer.prepareToSave();
if (doc.formFields.hasFormFields) {
var containers = doc.formFields.getFormFields();
//This will loop all the fields and change the values of the DocumentTextFormFields to 'LEADTOOLS PDF Forms', uncomment the below code to see it in action
// for (let i = 0; i < containers.length; i++) {
// for (let j = 0; j < containers[i].children.count; j++) {
// if (containers[i].children.item(j) != null && containers[i].children.item(j).type == "DocumentTextFormField") {
// containers[i].children.item(j).value = "LEADTOOLS PDF Forms";
// }
// }
// }
//Loops through on all the pages and fields of each page and outputs the results in the console
for (let i = 0; i < containers.length; i++) {
for (let j = 0; j < containers[i].children.count; j++) {
console.log(`-------------------------- Page <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>i</mi><mo>+</mo><mn>1</mn></mrow><mo>−</mo><mi>F</mi><mi>i</mi><mi>e</mi><mi>l</mi><mi>d</mi></mrow><annotation encoding="application/x-tex">{i + 1} - Field </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7429em;vertical-align:-0.0833em;"></span><span class="mord"><span class="mord mathnormal">i</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mord">1</span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">−</span><span class="mspace" style="margin-right:0.2222em;"></span></span><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord mathnormal" style="margin-right:0.13889em;">F</span><span class="mord mathnormal">i</span><span class="mord mathnormal">e</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal">d</span></span></span></span>{j + 1} ---------------------------------`)
console.log(`ID: ${containers[i].children.item(j).id}`);
console.log(`Name: ${containers[i].children.item(j).name}`);
console.log(`Bounds: ${containers[i].children.item(j).bounds}`);
console.log(`Background color: ${containers[i].children.item(j).backgroundColor}`);
console.log(`Printable: ${containers[i].children.item(j).printable}`);
console.log(`Viewable: ${containers[i].children.item(j).viewable}`);
console.log(`Locked: ${containers[i].children.item(j).locked}`);
console.log(`Required: ${containers[i].children.item(j).required}`);
console.log(`Read Only: ${containers[i].children.item(j).readOnly}`);
console.log(`Border Style: ${containers[i].children.item(j).borderStyle.style}`);
console.log(`Border Color: ${containers[i].children.item(j).borderStyle.color}`);
console.log(`Border Width: ${containers[i].children.item(j).borderStyle.width}`);
console.log(`Font Name: ${containers[i].children.item(j).textStyle.fontName}`);
console.log(`Font Size: ${containers[i].children.item(j).textStyle.fontSize}`);
console.log(`Font Color: ${containers[i].children.item(j).textStyle.color}`);
console.log(`Font Alignment: ${containers[i].children.item(j).textStyle.textAlignment}`);
console.log(`Type: ${containers[i].children.item(j).type}`);
if (containers[i].children.item(j).type == "DocumentTextFormField") {
console.log(`Value: ${containers[i].children.item(j).value}`)
console.log(`Content Type: ${containers[i].children.item(j).contentType}`);
console.log(`Max Length: ${containers[i].children.item(j).maxLength}`)
console.log(`Multi-Line: ${containers[i].children.item(j).multiline}`)
console.log(`Password: ${containers[i].children.item(j).isPassword}`)
console.log(`Comb: ${containers[i].children.item(j).isComb}`)
}
if (containers[i].children.item(j).type == "DocumentChoiceFormField") {
console.log(`Options Display Value: ${containers[i].children.item(j).optionsDisplayValue}`)
console.log(`Options Exported Value: ${containers[i].children.item(j).optionsExportedValue}`);
console.log(`Selected Indices: ${containers[i].children.item(j).selectedIndices}`)
console.log(`Multi-Select: ${containers[i].children.item(j).multiSelect}`)
console.log(`Choice Type: ${containers[i].children.item(j).choiceType}`)
}
if (containers[i].children.item(j).type == "DocumentButtonFormField") {
console.log(`Checked: ${containers[i].children.item(j).isChecked}`)
if (containers[i].children.item(j).buttonType == 0) {
console.log(`Button Type: Check Box`);
} else {
console.log(`Button Type: Radio Button`);
}
}
}
}
}
else {
console.log("This document does not have PDF Form Fields")
}
}
}
export var documentViewer = null;
export class ViewerInitializer {
constructor() {
this.init();
}
static showServiceError = (jqXHR, statusText, errorThrown) => {
alert('Error returned from service. See the console for details.')
const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
console.error(serviceError);
}
init = () => {
this.setLicense();
this.initFactory();
this.createDocumentViewer();
}
// Set the LEADTOOLS Evaluation license
setLicense = () => {
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) {
if (setLicenseResult.result) {
console.log("LEADTOOLS client license set successfully");
} else {
var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license.";
alert(msg);
console.log(msg);
}
});
}
// Before we call the service, we need to explain where it is ("localhost:40000/api", for example):
initFactory = () => {
lt.Document.DocumentFactory.serviceHost = "http://localhost:40000";
lt.Document.DocumentFactory.servicePath = "";
lt.Document.DocumentFactory.serviceApiPath = "api";
lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}";
lt.Document.DocumentFactory.verifyService()
.done(function (response) {
var serviceInfo = "Service name: '" + response.serviceName + "'";
serviceInfo += " version: '" + response.serviceVersion + "'";
serviceInfo += " platform: '" + response.servicePlatform + "'";
serviceInfo += " OS: '" + response.serviceOperatingSystem + "'";
lt.LTHelper.log(serviceInfo);
})
.fail(function (jqXHR, statusText, errorThrown) {
var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application.";
window.alert(errMsg);
console.log(errMsg);
});
}
createDocumentViewer = () => {
// Create the options object for the DocumentViewer
var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
createOptions.viewCreateOptions.useElements = true;
createOptions.thumbnailsCreateOptions.useElements = false;
// Set viewContainer to #documentViewer
createOptions.viewContainer = document.getElementById("content");
// Create the document viewer
documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// We prefer SVG viewing over Image viewing for this example
documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// To use Image: lt.Document.Viewer.DocumentViewerItemType.image;
documentViewer.view.imageViewer.autoCreateCanvas = true;
this.loadDefaultDoc(documentViewer)
}
loadDefaultDoc = (viewer) => {
var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";
var loadDocumentOptions = new lt.Document.LoadDocumentOptions();
loadDocumentOptions.loadFormFieldsMode = 1;
// Call the "LoadFromUri" and pass success and failure callbacks to the promise
lt.Document.DocumentFactory.loadFromUri(url, loadDocumentOptions)
.done((document) => {
const ready = () => {
documentViewer.setDocument(document);
this.registerClickEvents();
if (document.formFields.hasFormFields) {
console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information")
} else {
console.log("This document does not have PDF Form Fields")
}
}
if (document.isStructureSupported && !document.structure.isParsed)
document.structure.parse()
.done(ready)
.fail(ViewerInitializer.showServiceError);
else
ready();
})
.fail((ViewerInitializer.showServiceError));
}
//Initialize the onclick events for our two buttons
registerClickEvents = () => {
const importClick = document.getElementById('importBtn');
importClick.onclick = (e) => {
this.selectAndLoadFile();
}
}
selectAndLoadFile() {
//creates an input element on the Import Document button to upload files
//into the document editor
var input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.accept = '.doc, .docx, .pdf, .rtf, .txt';
input.onchange = function (e) {
var files = input.files;
if (!files || !files.length)
return;
var file = files[0];
//Set the cursor to an idle animations
document.body.style.cursor = 'wait';
//Create the document loading options
const loadDocumentOptions = new lt.Document.LoadDocumentOptions();
loadDocumentOptions.loadFormFieldsMode = 1;
//load the document from a file using the options
lt.Document.DocumentFactory.loadFromFile(file, loadDocumentOptions)
.then((doc) => {
//set the new document in the document viewer
documentViewer.setDocument(doc);
//check to see if the document has form fields
if (doc.formFields.hasFormFields) {
console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information")
}
else {
console.log("This document does not have PDF Form Fields")
}
})
//return the cursor to default
document.body.style.cursor = 'default';
};
input.click();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Image Viewer with Annotations and Burner</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="../../LT/Leadtools.js"></script>
<script src="../../LT/Leadtools.Controls.js"></script>
<script src="../../LT/Leadtools.Annotations.Engine.js"></script>
<script src="../../LT/Leadtools.Annotations.Designers.js"></script>
<script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script>
<script src="../../LT/Leadtools.Annotations.Automation.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Main.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Color.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Core.js"></script>
<script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script>
<script src="../../LT/Leadtools.Document.js"></script>
<script src="../../LT/Leadtools.Document.Viewer.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/examples.css">
<script src="../../bundle.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="title">
Showcasing PDF Form Fields in the Console Logs
</div>
<div id="serviceStatus" class="vcenter push-right"></div>
<ul id="menu">
<li><a id="importBtn" class="rightLineBorder">Import Document</a></li>
<li><a id="exampleBtn" class="rightLineBorder">Run Example</a></li>
<li><a id="getDataBtn" class="rightLineBorder" style="display: none;">Show Data in the Console</a></li>
</ul>
</div>
<div id="imageWrapper">
<div class="inner-body" id="content">
</div>
</div>
</body>
<script>
//creates the onclick functions for the buttons and hides/shows them when necessary
window.onload = () => {
const button = document.getElementById('exampleBtn');
const example = new window.examples.DocumentFormFields();
const getDataBtn = document.getElementById('getDataBtn');
button.onclick = () => {
example.run();
button.style.display = "none";
getDataBtn.style.display = "block";
}
getDataBtn.onclick = () => {
example.getData();
}
};
</script>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
#title {
padding: 10px;
font-size: 24px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#imageWrapper {
border-top: 1px solid black;
height: 95%;
}
#content {
height: 100%;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
cursor: pointer;
user-select: none;
font-weight: bold;
}
li:first-child {
margin-left: 5px;
}
.rightLineBorder{
border-right: 1px black solid;
}
li a:hover {
background-color: lightblue;
}