Create Interactive Forms in PDF

This sample shows how to print form list information, set up interactive forms (including Text Field, Check Box, Radio Button, Push Button, List Box and Combo Button), and fill out form information

// 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: 'textfield',
    rect: {
      left: 102,
      top: 136,
      right: 161,
      bottom: 156
    },
    fieldName: 'Text Field1',
    isHidden: 0,
    contents: 'test',
    backgroundColor: '#93B9FD',
    color: '#000000',
    fontName: 'Helvetica',
    fontSize: 14,
    textAlignment: 'left',
    isMultiLine: false,
    pageIndex: 0
  });
}

// Create Check Box.
function CreatCheckBox(docViewer) {
  docViewer.addAnnotations({
    type: 'checkbox',
    rect: {
      left: 110,
      top: 190,
      right: 130,
      bottom: 210
    },
    fieldName: 'Check Box1',
    isHidden: 0,
    borderColor: '#43474D',
    backgroundColor: '#93B9FD',
    borderWidth: 1,
    borderStyle: 'solid',
    checkStyle: 0,
    isChecked: 0,
    pageIndex: 0
  });
}

// Create Radio Button.
function CreateRadioButton(docViewer) {
  docViewer.addAnnotations({
    type: 'radiobutton',
    rect: {
      left: 150,
      top: 190,
      right: 170,
      bottom: 210
    },
    fieldName: 'Group1',
    isHidden: 0,
    borderColor: '#43474D',
    borderStyle: 'solid',
    borderWidth: 1,
    backgroundColor: '#93B9FD',
    checkStyle: 1,
    isChecked: 0,
    pageIndex: 0
  });
}

// Create List Box.
function CreateListBox(docViewer) {
  docViewer.addAnnotations({
    type: 'listbox',
    rect: {
      left: 356,
      top: 176,
      right: 414,
      bottom: 203
    },
    borderColor: '#43474D',
    borderStyle: 'solid',
    borderWidth: 1,
    fieldName: 'List Box1',
    fontName: 'Helvetica',
    fontSize: 14,
    isHidden: 0,
    items: [
      {
        Value: 'Item1',
        String: 'Item1'
      },
      {
        Value: 'Item2',
        String: 'Item2'
      }
    ],
    selected: 0,
    color: '#000000',
    backgroundColor: '#93B9FD',
    pageIndex: 0
  });
}

// Create Combo Box.
function CreateComboBox(docViewer) {
  docViewer.addAnnotations({
    type: 'combobox',
    rect: {
      left: 356,
      top: 176,
      right: 414,
      bottom: 203
    },
    borderColor: '#43474D',
    borderStyle: 'solid',
    borderWidth: 1,
    fieldName: 'Combo Box1',
    fontName: 'Helvetica',
    fontSize: 14,
    isHidden: 0,
    items: [
      {
        Value: 'Item1',
        String: 'Item1'
      },
      {
        Value: 'Item2',
        String: 'Item2'
      }
    ],
    selected: 0,
    color: '#000000',
    backgroundColor: '#93B9FD',
    pageIndex: 0
  });
}

// Create Push Button.
function CreatePushButton(docViewer) {
  // Go To Pages.
  docViewer.addAnnotations({
    type: 'pushbutton',
    rect: {
      left: 356,
      top: 176,
      right: 414,
      bottom: 203
    },
    backgroundColor: '#93B9FD',
    borderColor: '#43474D',
    borderStyle: 'solid',
    borderWidth: 1,
    fieldName: 'Button1',
    fontName: 'Helvetica',
    fontSize: 14,
    actionType: 1,
    isHidden: 0,
    color: '#000000',
    title: 'OK',
    pageIndex: 0,
    destPage: 2
  });

  // Open a Web Link.
  docViewer.addAnnotations({
    type: 'pushbutton',
    rect: {
      left: 356,
      top: 176,
      right: 414,
      bottom: 203
    },
    backgroundColor: '#93B9FD',
    borderColor: '#43474D',
    borderStyle: 'solid',
    borderWidth: 1,
    fieldName: 'Button1',
    fontName: 'Helvetica',
    fontSize: 14,
    isHidden: 0,
    color: '#000000',
    title: 'OK',
    pageIndex: 0,
    actionType: 6,
    url: 'http://example.com'
  });
}