社区首页 >专栏 >创建表单字段

创建表单字段

原创

Youna

发布于 2025-01-14 08:25:04

5400

代码可运行

运行总次数：0

代码可运行

在你的应用程序中集成 “创建表单域" 到PDF文件中可以允许您制作可填写的PDF表单。下面是用ComPDFKit for Web创建表单域的代码方式。

文本字段

可以创建、自定义、命名、填充、下载、隐藏和删除文本字段。除了该字段之外，ComPDFKit for Web 还提供选项来更改文本字段中的文本颜色、背景颜色、字体、单行/多行和文本对齐方式。以下是设置编辑文本字段的示例代码。

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

复选框

可以创建、自定义、命名、填充、下载、隐藏和删除复选框。除了字段之外，ComPDFKit for Web 还提供选项来设置复选框内出现的标记的形状，包括勾号、圆形、十字形、菱形、正方形或星形。以下是设置编辑复选框的示例代码。

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

单选按钮

可以创建、自定义、命名、填充、下载、隐藏和删除单选按钮。除了字段之外，ComPDFKit for Web 还提供选项来设置单选按钮内出现的标记的形状，包括勾号、圆形、十字形、菱形、正方形或星形。以下是编辑单选按钮的示例代码。

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

列表框

可以创建、自定义、命名、选择、下载、隐藏和删除列表框。除了字段之外，ComPDFKit for Web 还提供了更改列表框中文本颜色、背景颜色和字体的选项。以下是编辑列表框的示例代码。

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

组合框

可以创建、自定义、命名、选择、下载、隐藏和删除组合框。除了字段之外，ComPDFKit for Web 还提供了更改组合框中文本颜色、背景颜色和字体的选项。以下是编辑组合框的示例代码。

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

按钮

可以创建、自定义、命名、下载、隐藏和删除按钮。除了字段之外，ComPDFKit for Web 还提供选项来更改按钮中的文本颜色、背景颜色和字体，或设置操作以转到页面或打开 Web 链接。以下是编辑按钮的示例代码。

JavaScript的

// 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'
});