Load, Edit, and Export PDF Form Field Compatible PDF Files - HTML5 JavaScript

let documentViewer = null;  

window.onload = async () => { 
   // Set the LEADTOOLS Evaluation license  
   const licenseUrl = "./Leadtools/LEADTOOLS.lic.txt";  
   const developerKey = "ADD THE CONTENTS OF THE LEADTOOLS.lic.key.txt FILE"; 
   lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, null); 
   // Create the options object for the DocumentViewer  
   const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
   createOptions.viewCreateOptions.useElements = true; 
   // Set viewContainer to #documentViewer  
   createOptions.viewContainer = document.getElementById("documentViewer"); 
   // Create the document viewer  
   documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
   // Set interactive mode to Pan / Zoom  
   //documentViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom);  
   // 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;  
   documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
   // Initialize documentViewer annotations   
   documentViewer.annotations.initialize(); 
   // Before we call the service, we need to explain where it is ("localhost:40000/api", for example):  
   lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; // or wherever your host is  
   lt.Document.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example  
   lt.Document.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentService  
   //Initialize the onclick events for our two buttons  
   document.getElementById('loader').onclick = selectAndLoadFile; 
   document.getElementById('getData').onclick = getData; 
   document.getElementById('export').onclick = exportPDF; 
   // Load a PDF document  
   const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
   const loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
   loadDocumentOptions.loadFormFieldsMode = 1; 
   // Call the "LoadFromUri" and pass success and failure callbacks to the promise  
   try { 
      let document = await lt.Document.DocumentFactory.loadFromUri(url, loadDocumentOptions) 
      documentViewer.setDocument(document); 
      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") 
      } 
   } catch (error) { 
      console.error(error); 
      // Get more information from LEADTOOLS  
      let serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      lt.LTHelper.log(serviceError); 
 
      // Show an alert about what the issue is  
      let lines = []; 
      lines.push("Document Viewer Error:"); 
      lines.push(serviceError.message); 
      lines.push(serviceError.detail); 
      lines.push("See console for details.") 
      alert(lines.join("\n")); 
   } 
} 

function selectAndLoadFile() { 
   //creates an input element on the Import Document button to upload files   
   //into the document editor   
   const input = document.createElement('input'); 
   input.type = 'file'; 
   input.style.display = 'none'; 
   input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
   input.onchange = async function (e) { 
      let files = input.files; 
      if (!files?.length) 
         return; 
      let 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; 
      try { 
         //load the document from a file using the options  
         let doc = await lt.Document.DocumentFactory.loadFromFile(file, loadDocumentOptions) 
         //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") 
         } 
      } catch (error) { 
         console.error(error); 
      } 
      //return the cursor to default  
      document.body.style.cursor = 'default'; 
   }; 
   input.click(); 
} 
async function exportPDF() { 
   try { 
      //gets the document in the document viewer  
      let doc = await documentViewer.document; 
      //prepares the document for saving  
      documentViewer.prepareToSave(); 
      //saves the document to the cache  
      lt.Document.DocumentFactory.saveToCache(doc) 
      //once the doc is saved to the cache, creates the printing option  
      const options = new lt.Document.Viewer.PrintDocumentOptions(); 
      //certain printing options are being set  
      options.showAnnotations = true; 
      options.usePdfPrinting = true; 
      //gets the iframe HTMLElement that will "house" the printable pdf  
      options.parent = document.getElementById('parent'); 
      //prints and opens the browser printer for saving/printing  
      documentViewer.print(options); 
 
   } catch (error) { 
      console.error(error); 
   } 
} 

function getData() { 
   let doc = documentViewer.document; 
   documentViewer.prepareToSave(); 
   if (doc.formFields.hasFormFields) { 
      let containers = doc.formFields.getFormFields(); 
      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") 
   } 
}