ComPDF
联系销售
文档DemoDownloadFAQ更新日志
Guides

创建表单域 ​

ComPDF React Native SDK 支持两种方式创建表单域：通过 CPDFReaderView 进入表单创建模式进行交互创建，或通过 CPDFDocument API 以编程方式创建表单域。

交互创建 ​

通过 CPDFReaderView，用户可以进入表单模式并通过触摸操作添加表单域。

tsx
const pdfReaderRef = useRef<CPDFReaderView>(null);

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({})}
/>

await pdfReaderRef.current?.setFormCreationMode(CPDFWidgetType.TEXT_FIELD);

退出创建模式 ​

tsx
await pdfReaderRef.current?.exitFormCreationMode();

支持的表单域类型 ​

类型
CPDFWidgetType.TEXT_FIELD
CPDFWidgetType.CHECKBOX
CPDFWidgetType.RADIO_BUTTON
CPDFWidgetType.LISTBOX
CPDFWidgetType.COMBOBOX
CPDFWidgetType.SIGNATURES_FIELDS
CPDFWidgetType.PUSH_BUTTON

编程创建 ​

通过 CPDFDocument API 以编程方式创建表单域，以下示例展示了如何创建各种类型表单：

注意：rect 参数定义了表单域在页面上的位置和大小，坐标系的原点位于页面的左下角。

  • 创建文本域 ​

tsx
const textField = new CPDFTextWidget({
  title: CPDFWidgetUtil.createFieldName("TextField"),
  page: 0,
  rect: { left: 40, top: 799, right: 320, bottom: 701 },
  createDate: new Date(1735696800000),
  text: "This is Text Fields",
  isMultiline: true,
  fillColor: "#BEBEBE",
  borderColor: "#8BC34A",
  borderWidth: 5,
  fontColor: "#000000",
  fontSize: 14,
  familyName: "Times",
  styleName: "Bold",
  alignment: "right",
});
await pdfReaderRef.current?._pdfDocument.addWidgets([textField]);
  • 创建复选框
tsx
const checkBox = new CPDFCheckboxWidget({
  title: CPDFWidgetUtil.createFieldName("Checkbox"),
  page: 0,
  rect: { left: 361, top: 778, right: 442, bottom: 704 },
  isChecked: true,
  checkStyle: CPDFCheckStyle.CIRCLE,
  checkColor: "#3CE930",
  fillColor: "#e0e0e0",
  borderColor: "#000000",
  borderWidth: 5,
});
await pdfReaderRef.current?._pdfDocument.addWidgets([checkBox]);

  • 创建单选按钮 ​

tsx
const radioButtonWidget = new CPDFRadiobuttonWidget({
  title: CPDFWidgetUtil.createFieldName("Radiobutton"),
  page: 0,
  rect: { left: 479, top: 789, right: 549, bottom: 715 },
  isChecked: true,
  checkStyle: CPDFCheckStyle.CROSS,
  checkColor: "#FF0000",
  fillColor: "#00FF00",
  borderColor: "#000000",
  borderWidth: 5,
});
await pdfReaderRef.current?._pdfDocument.addWidgets([radioButtonWidget]);

  • 创建列表框 ​

tsx
const listBoxWidget = new CPDFListboxWidget({
  title: CPDFWidgetUtil.createFieldName("Listbox"),
  page: 0,
  rect: { left: 53, top: 294, right: 294, bottom: 191 },
  selectItemAtIndex: 0,
  options: [
    { text: "options-1", value: "options-1" },
    { text: "options-2", value: "options-2" },
  ],
  familyName: "Times",
  styleName: "Bold",
  fillColor: "#FFFF00",
  borderColor: "#FF0000",
  borderWidth: 3,
})
await pdfReaderRef.current?._pdfDocument.addWidgets([listBoxWidget]);

使用 CPDFReaderView 创建列表框时，默认会自动弹出选项列表弹窗，用于立即添加选项。ComPDF React Native SDK 提供了关闭该弹窗的配置选项，示例如下:

tsx
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    formsConfig: {
      showCreateListBoxOptionsDialog: false
    }
  })}
  />

同时也可以通过 pdfReaderRef.current?.addEventListener(CPDFEvent.FORM_FIELDS_CREATED, (event) {}) 监听表单创建完成事件，弹出自定义的选项列表弹窗进行编辑操作。详细请查看表单事件通知。

  • 创建组合框 ​

tsx
const comboBoxWidget = new CPDFComboboxWidget({
  title: CPDFWidgetUtil.createFieldName("Combobox"),
  page: 0,
  rect: { left: 354, top: 288, right: 557, bottom: 170 },
  selectItemAtIndex: 1,
  options: [
    { text: "options-1", value: "options-1" },
    { text: "options-2", value: "options-2" },
  ],
  familyName: "Times",
  styleName: "Bold",
  fillColor: "#FFFF00",
  borderColor: "#FF0000",
  borderWidth: 3,
});
await pdfReaderRef.current?._pdfDocument.addWidget([comboBoxWidget]);

使用 CPDFReaderView 创建组合框时，默认会自动弹出选项列表弹窗，用于立即添加选项。ComPDF React Native SDK 提供了关闭该弹窗的配置选项，示例如下:

tsx
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    formsConfig: {
      showCreateComboBoxOptionsDialog: false
    }
  })}
  />

您也可以通过 controller.addEventListener(CPDFEvent.FORM_FIELDS_CREATED, (event) {}) 监听表单创建完成事件，弹出自定义的选项列表弹窗进行编辑操作。详细请查看表单事件通知。

  • 创建签名域 ​

tsx
const signatureWidget = new CPDFSignatureWidget({
  title: CPDFWidgetUtil.createFieldName("Signature"),
  page: 0,
  rect: { left: 64, top: 649, right: 319, bottom: 527 },
  fillColor: "#E0e0e0",
  borderColor: "#FF0000",
  borderWidth: 5,
});
await pdfReaderRef.current?._pdfDocument.addWidgets([signatureWidget]);
  • 创建按钮

按钮可以设置不同的动作类型，如跳转网页、跳转页面等。

tsx
// 跳转网页按钮
const urlButtonWidget = new CPDFPushbuttonWidget({
  title: CPDFWidgetUtil.createFieldName("Pushbutton"),
  page: 0,
  rect: { left: 365, top: 503, right: 501, bottom: 413 },
  fillColor: "#e0e0e0",
  borderColor: "#ff0000",
  borderWidth: 5,
  fontSize: 14,
  buttonTitle: "To Web",
  action: CPDFUriAction.createWeb("https://www.compdf.com"),
});

// 跳转页面按钮
const gotoButtonWidget = new CPDFPushbuttonWidget({
  title: CPDFWidgetUtil.createFieldName("Pushbutton"),
  page: 0,
  rect: { left: 366, top: 632, right: 520, bottom: 541 },
  fillColor: "#e0e0e0",
  borderColor: "#ff0000",
  borderWidth: 5,
  fontSize: 14,
  buttonTitle: "Jump Page 2",
  action: CPDFGoToAction.toPage(1),
});

await pdfReaderRef.current?._pdfDocument.addWidgets([urlButtonWidget, gotoButtonWidget]);

使用 CPDFReaderView 创建按钮时，默认会自动弹出选项编辑弹窗，用于立即设置按钮事件。ComPDF React Native SDK 提供了关闭该弹窗的配置选项，示例如下:

tsx
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    formsConfig: {
      showCreatePushButtonOptionsDialog: false
    }
  })}
  />

您也可以通过 controller.addEventListener(CPDFEvent.FORM_FIELDS_CREATED, (event) {}) 监听表单创建完成事件，弹出自定义的事件编辑弹窗进行编辑操作。详细请查看表单事件通知。

支持的表单域类型

类型
CPDFWidgetType.TEXT_FIELD
CPDFWidgetType.CHECKBOX
CPDFWidgetType.RADIO_BUTTON
CPDFWidgetType.LISTBOX
CPDFWidgetType.COMBOBOX
CPDFWidgetType.SIGNATURES_FIELDS
CPDFWidgetType.PUSH_BUTTON