在 PDF 中创建交互式表单

本示例展示如何打印表单列表信息、创建交互式表单（包括文本域、复选框、单选按钮、按钮、列表框和组合框）以及填写表单信息。

// 导入 ComPDFKit Web Demo 的 JS 文件。
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer)
.then((instance) => {
  const { documentViewer } = instance.Core;
  documentViewer.addEventListener('documentLoaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // 示例：创建表单。
    CreateForms(instance.Core);
  })
})

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

// 创建文本域。
function CreateTextField({ annotationManager, Annotations }) {
  const fieldManager = annotationManager.getFieldManager();

  const textField = new Annotations.Forms.Field('Text Field1', { type: 'Tx', value: 'test' });
  const textWidget = new Annotations.TextWidgetAnnotation(textField, {
    PageNumber: 1,
    X: 102,
    Y: 136,
    Width: 59,
    Height: 20
  });
  textWidget.Hidden = false;
  textWidget.FillColor = new Annotations.Color('#93B9FD');
  textWidget.font = new Annotations.Font({ name: 'Helvetica', size: 14 });
  textWidget.TextColor = new Annotations.Color('#000000');
  textWidget.quadding = 'Left-justified';
  textWidget.setFieldFlag(Annotations.WidgetFlags.MULTILINE, false);
  fieldManager.addField(textField);
  annotationManager.addAnnotation(textWidget);
}

// 创建复选框。
function CreatCheckBox({ annotationManager, Annotations }) {
  const fieldManager = annotationManager.getFieldManager();

  const checkBoxField = new Annotations.Forms.Field('Check Box1', { type: 'Btn', value: 'Off' });
  const checkBoxWidget = new Annotations.CheckButtonWidgetAnnotation(checkBoxField, {
    PageNumber: 1,
    X: 110,
    Y: 190,
    Width: 20,
    Height: 20
  });
  checkBoxWidget.Hidden = false;
  checkBoxWidget.StrokeColor = new Annotations.Color('#43474D');
  checkBoxWidget.FillColor = new Annotations.Color('#93B9FD');
  checkBoxWidget.StrokeThickness = 1;
  // 勾选样式：'4' 对勾，'l' 圆形，'8' 叉号，'u' 菱形，'n' 方形，'H' 星形。
  checkBoxWidget.captions.Normal = '4';
  fieldManager.addField(checkBoxField);
  annotationManager.addAnnotation(checkBoxWidget);
}

// 创建单选按钮。
function CreateRadioButton({ annotationManager, Annotations }) {
  const fieldManager = annotationManager.getFieldManager();

  const radioField = new Annotations.Forms.Field('Group1', { type: 'Btn', value: 'Off' });
  const radioWidget = new Annotations.RadioButtonWidgetAnnotation(radioField, {
    PageNumber: 1,
    X: 150,
    Y: 190,
    Width: 20,
    Height: 20
  });
  radioWidget.Hidden = false;
  radioWidget.StrokeColor = new Annotations.Color('#43474D');
  radioWidget.StrokeThickness = 1;
  radioWidget.FillColor = new Annotations.Color('#93B9FD');
  // 勾选样式：'4' 对勾，'l' 圆形，'8' 叉号，'u' 菱形，'n' 方形，'H' 星形。
  radioWidget.captions.Normal = 'l';
  fieldManager.addField(radioField);
  annotationManager.addAnnotation(radioWidget);
}

// 创建列表框。
function CreateListBox({ annotationManager, Annotations }) {
  const fieldManager = annotationManager.getFieldManager();

  const listBoxField = new Annotations.Forms.Field('List Box1', { type: 'Ch', value: 'Item1' });
  const listBoxWidget = new Annotations.ListWidgetAnnotation(listBoxField, {
    PageNumber: 1,
    X: 356,
    Y: 176,
    Width: 58,
    Height: 27
  });
  listBoxWidget.StrokeColor = new Annotations.Color('#43474D');
  listBoxWidget.StrokeThickness = 1;
  listBoxWidget.font = new Annotations.Font({ name: 'Helvetica', size: 14 });
  listBoxWidget.Hidden = false;
  listBoxWidget.setFieldOptions([
    { value: 'Item1', displayValue: 'Item1' },
    { value: 'Item2', displayValue: 'Item2' }
  ]);
  listBoxWidget.TextColor = new Annotations.Color('#000000');
  listBoxWidget.FillColor = new Annotations.Color('#93B9FD');
  fieldManager.addField(listBoxField);
  annotationManager.addAnnotation(listBoxWidget);
}

// 创建组合框。
function CreateComboBox({ annotationManager, Annotations }) {
  const fieldManager = annotationManager.getFieldManager();

  const comboBoxField = new Annotations.Forms.Field('Combo Box1', { type: 'Ch', value: 'Item1' });
  const comboBoxWidget = new Annotations.ChoiceWidgetAnnotation(comboBoxField, {
    PageNumber: 1,
    X: 356,
    Y: 176,
    Width: 58,
    Height: 27
  });
  comboBoxWidget.StrokeColor = new Annotations.Color('#43474D');
  comboBoxWidget.StrokeThickness = 1;
  comboBoxWidget.font = new Annotations.Font({ name: 'Helvetica', size: 14 });
  comboBoxWidget.Hidden = false;
  comboBoxWidget.setFieldOptions([
    { value: 'Item1', displayValue: 'Item1' },
    { value: 'Item2', displayValue: 'Item2' }
  ]);
  comboBoxWidget.TextColor = new Annotations.Color('#000000');
  comboBoxWidget.FillColor = new Annotations.Color('#93B9FD');
  fieldManager.addField(comboBoxField);
  annotationManager.addAnnotation(comboBoxWidget);
}

// 创建按钮。
function CreatePushButton({ annotationManager, Annotations, Actions }) {
  const fieldManager = annotationManager.getFieldManager();

  // 跳转到页面。
  const pageButtonField = new Annotations.Forms.Field('Button1', { type: 'Btn' });
  const pageButton = new Annotations.PushButtonWidgetAnnotation(pageButtonField, {
    PageNumber: 1,
    X: 356,
    Y: 176,
    Width: 58,
    Height: 27
  });
  pageButton.FillColor = new Annotations.Color('#93B9FD');
  pageButton.StrokeColor = new Annotations.Color('#43474D');
  pageButton.StrokeThickness = 1;
  pageButton.font = new Annotations.Font({ name: 'Helvetica', size: 14 });
  pageButton.Hidden = false;
  pageButton.TextColor = new Annotations.Color('#000000');
  pageButton.captions.Normal = 'OK';
  pageButton.addAction('U', new Actions.GoTo({ dest: { page: 2 } }));
  fieldManager.addField(pageButtonField);
  annotationManager.addAnnotation(pageButton);

  // 打开网页链接。
  const linkButtonField = new Annotations.Forms.Field('Button1', { type: 'Btn' });
  const linkButton = new Annotations.PushButtonWidgetAnnotation(linkButtonField, {
    PageNumber: 1,
    X: 356,
    Y: 176,
    Width: 58,
    Height: 27
  });
  linkButton.FillColor = new Annotations.Color('#93B9FD');
  linkButton.StrokeColor = new Annotations.Color('#43474D');
  linkButton.StrokeThickness = 1;
  linkButton.font = new Annotations.Font({ name: 'Helvetica', size: 14 });
  linkButton.Hidden = false;
  linkButton.TextColor = new Annotations.Color('#000000');
  linkButton.captions.Normal = 'OK';
  linkButton.addAction('U', new Actions.URI({ uri: 'http://example.com' }));
  fieldManager.addField(linkButtonField);
  annotationManager.addAnnotation(linkButton);
}