backgroundColor Property

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;  
}