Indicates whether the form field can be updated.
Object.defineProperty(DocumentFormField.prototype, 'locked',
get: function()
)
readonly locked: boolean;
true if the DocumentFormField is locked; otherwise false. The default is false.
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 ${i + 1} - Field ${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 ${i + 1} - Field ${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;
}
Help Collections
Raster .NET | C API | C++ Class Library | HTML5 JavaScript
Document .NET | C API | C++ Class Library | HTML5 JavaScript
Medical .NET | C API | C++ Class Library | HTML5 JavaScript
Medical Web Viewer .NET
Multimedia
Direct Show .NET | C API | Filters
Media Foundation .NET | C API | Transforms
Supported Platforms
.NET, Java, Android, and iOS/macOS Assemblies
Imaging, Medical, and Document
C API/C++ Class Libraries
Imaging, Medical, and Document
HTML5 JavaScript Libraries
Imaging, Medical, and Document
Your email has been sent to support! Someone should be in touch! If your matter is urgent please come back into chat.
Chat Hours:
Monday - Friday, 8:30am to 6pm ET
Thank you for your feedback!
Please fill out the form again to start a new chat.
All agents are currently offline.
Chat Hours:
Monday - Friday
8:30AM - 6PM EST
To contact us please fill out this form and we will contact you via email.