ComPDFKit
产品介绍
New
开发文档
联系我们申请试用
技术支持

创建表单域 ​

创建表单字段的方式与添加任何其他注释一样，如在创建注释的指南中所示。但是，你需要将批注类型更改为相应的表单字段，例如 text-field 或 check-box 等。

创建文本域 ​

文本域允许用户在指定区域输入文本，常用于收集用户信息或填写表格。以下是创建文本域的示例代码：

javascript
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
});

创建复选框 ​

复选框允许用户通过勾选或取消勾选来表示某个选项的状态。以下是创建复选框的示例代码：

javascript
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
});

创建单选按钮 ​

单选框允许用户在一组预定义选项中选择唯一的单个选项。以下是创建单选框的示例代码：

javascript
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
});

创建列表框 ​

列表框允许用户从预定义的选项列表中选择一个或多个项目，提供便捷的数据选择功能。以下是创建列表框的示例代码：

javascript
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
});

创建下拉菜单 ​

可以下拉的区域，选中下拉的一项将显示在该区域中。以下是创建下拉菜单的示例代码：

javascript
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
});

创建按钮 ​

按钮允许用户在 PDF 页面上执行操作，如页面跳转和超链接跳转。以下是创建按钮的示例代码：

javascript
// 跳转页面。
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
});

// 打开一个链接。
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'
});