Create Interactive Forms in PDF ​

// Import the JS file of ComPDFKit Web Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // Sample: Create forms
    CreateForms(docViewer);
  })
})

function CreateForms(docViewer) {
  CreateTextField(docViewer);
  CreatCheckBox(docViewer);
  CreateRadioButton(docViewer);
  CreateListBox(docViewer);
  CreateComboBox(docViewer);
  CreatePushButton(docViewer);
}

// Create Text Field
function CreateTextField(docViewer) {
  docViewer.addAnnotations({
    type: "text-field",
    format: "0",
    rect: "221.40,538,363.40,626",
    fieldName: "Text Field1",
    isHidden: "0",
    backgroundColor: "#93B9FD",
    textColor: "#000000",
    fontName: "Helvetica",
    fontSize: "14",
    alignment: "0",
    multiline: false,
    page: 1
  });
}

// Create Check Box
function CreatCheckBox(docViewer) {
  docViewer.addAnnotations({
    type: "check-box",
    rect: "325.40,392,351.40,419",
    fieldName: "Check Box1",
    isHidden: "0",
    borderColor: "#43474D",
    backgroundColor: "#93B9FD",
    lineWidth: "3",
    style: "0",
    select: "0",
    page: 1
  });
}

// Create Radio Button
function CreateRadioButton(docViewer) {
  docViewer.addAnnotations({
    type: "radio-button",
    rect: "325.40,392,351.40,419",
    fieldName: "Group1",
    isHidden: "0",
    borderColor: "#43474D",
    backgroundColor: "#93B9FD",
    lineWidth: "3",
    style: "0",
    select: "0",
    page: 1
  });
}

// Create List Box
function CreateListBox(docViewer) {
  docViewer.addAnnotations({
    type: "list-box",
    rect: "239,638,310,666",
    fieldName: "List Box1",
    fontName: "Helvetica",
    fontSize: "14",
    isHidden: "0",
    options: "Item 1,Item 2",
    select: "1",
    textColor: "#000000",
    backgroundColor: "#93B9FD",
    page: 1
  });
}

// Create Combo Box
function CreateComboBox(docViewer) {
  docViewer.addAnnotations({
    type: "combo-box",
    rect: "109,654,162,672",
    fieldName: "Combo Box1",
    fontName: "Helvetica",
    fontSize: "14",
    isHidden: "0",
    options: "Item 1,Item 2",
    select: "1",
    textColor: "#000000",
    backgroundColor: "#93B9FD",
    page: 1
  });
}

// Create Push Button
function CreatePushButton(docViewer) {
  // Go To Pages.
  docViewer.addAnnotations({
    type: "push-button",
    rect: "334,648,407,678",
    fieldName: "Button1",
    fontName: "Helvetica",
    fontSize: "14",
    format: "0",
    isHidden: "0",
    textColor: "#000000",
    backgroundColor: "#93B9FD",
    value: "OK",
    page: 1,
    actionType: "1",
    destPage: "2"
  });

  // Open a Web Link.
  docViewer.addAnnotations({
    type: "push-button",
    rect: "334,648,407,678",
    fieldName: "Button1",
    fontName: "Helvetica",
    fontSize: "14",
    format: "0",
    isHidden: "0",
    textColor: "#000000",
    backgroundColor: "#93B9FD",
    value: "OK",
    page: 1,
    actionType: "2",
    url: "http://example.com"
  });
}