Import, Edit, and Save Documents with the Document Editor - HTML5 JavaScript

let editor = null; 
 
window.onload = () => { 
    setLicense(); 
    addEditControl(); 
    registerClickEvents(); 
    initFactory(); 
}; 
 
function addEditControl() { 
    const content = document.getElementById('content'); 
    editor = new lt.Document.Editor.DocumentEditor({ 
        root: content 
    }); 
} 
 
function registerClickEvents() { 
    document.getElementById('importBtn').onclick = selectAndLoadFile; 
    document.getElementById('exportBtn').onclick = exportAsPdf; 
} 
 
function 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); 
            var msgParagraph = document.createElement('p'); 
            msgParagraph.innerText = msg; 
            const parent = document.getElementById("div_container"); 
            while (parent.firstElementChild) { 
                parent.removeChild(parent.firstElementChild); 
            } 
            parent.appendChild(msgParagraph); 
            console.log(msg); 
        } 
    }); 
} 
 
function initFactory() { 
    // To communicate with the DocumentsService, it must be running!  
    // Change these parameters to match the path to the service. 
 
    lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
    lt.Document.DocumentFactory.servicePath = ""; 
    lt.Document.DocumentFactory.serviceApiPath = "api"; 
 
    // Set local proxy url template (Used in local load mode) 
    lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
 
    // Ping the Document service 
    lt.Document.DocumentFactory.verifyService() 
        .done((response) => { 
            var serviceInfo = "Service name: '" + response.serviceName + "'"; 
            serviceInfo += " version: '" + response.serviceVersion + "'"; 
            serviceInfo += " platform: '" + response.servicePlatform + "'"; 
            serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
            lt.LTHelper.log(serviceInfo); 
        }) 
        .fail((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); 
        }); 
} 
 
function selectAndLoadFile() { 
    const input = document.createElement('input'); 
    input.type = 'file'; 
    input.style.display = 'none'; 
    input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
 
    input.onchange = (e) => { 
        const files = input.files; 
 
        if (!files || !files.length) 
            return; 
 
        const file = files[0]; 
 
        document.body.style.cursor = 'wait'; 
 
        let promise = lt.Document.Editor.EditableDocument.fromFile(file); 
        promise.then(doc => { 
            editor.setDocument(doc); 
        }); 
        promise.finally(() => { 
            document.body.style.cursor = 'default'; 
        }); 
    }; 
    input.click(); 
} 
 
function exportAsPdf() { 
    let promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
    promise.then(name => {}) 
        .catch(err => { 
            alert(`There was an issue exporting the document. ${err}`); 
        }); 
}