本文介绍如何在基于 mendix 的自定义 pdf 查看器中，将 pdftron 表单字段的“field name”输入方式从文本框替换为动态下拉框，并通过后端数据源填充选项。
本文介绍如何在基于 mendix 的自定义 pdf 查看器中，将 pdftron 表单字段的“field name”输入方式从文本框替换为动态下拉框，并通过后端数据源填充选项。
在 PDFTron 的 WebViewer（尤其是与 Mendix 集成的定制化场景）中，表单字段（如 TextWidgetAnnotation 或 ChoiceWidgetAnnotation）默认通过 JavaScript API 进行交互控制。若需将“Field Name”这一元信息的编辑入口由自由输入的 替换为受控的下拉选择（
实现步骤概览
获取并预加载字段名列表
通过 Mendix REST 或微流暴露字段名集合（例如 ["invoice_number", "customer_name", "due_date"]），在 WebViewer 初始化后通过 fetch() 加载至前端。替换原生文本输入为下拉组件
定位原有字段名编辑区域（通常为 DOM 中的 .field-name-input 类容器），用
<select id="field-name-dropdown" class="form-control"><option value="">— 请选择字段名 —</option> <option value="invoice_number">发票编号</option> <option value="customer_name">客户姓名</option> <option value="due_date">到期日期</option></select>
-
监听选择并更新注解字段名
当用户选择后，获取当前激活的表单字段注解（例如通过 viewer.getSelectedAnnotations()[0]），并安全地修改其 FieldName：
const dropdown = document.getElementById('field-name-dropdown');
dropdown.addEventListener('change', (e) => {
const selectedAnnot = viewer.getSelectedAnnotations()[0];
if (selectedAnnot && selectedAnnot instanceof Annotations.WidgetAnnotation) {
// 注意：FieldName 是只读属性，需通过低层 API 修改
// 推荐方式：先移除旧注解，再创建新注解（保留位置/样式）
const newAnnot = selectedAnnot.copy();
newAnnot.FieldName = e.target.value;
// 替换文档中的注解（需在 DocumentEditor 上下文中操作）
const docEditor = viewer.getDocumentEditor();
docEditor.removeAnnotation(selectedAnnot);
docEditor.addAnnotation(newAnnot);
docEditor.redrawAnnotations();
}
});
⚠️ 重要注意事项：
- WidgetAnnotation.FieldName 在 PDFTron SDK 中为只读属性，不可直接赋值；必须通过 copy() + removeAnnotation() + addAnnotation() 流程实现逻辑更新，否则将导致字段行为异常或保存失败。
- 若使用的是 ChoiceWidgetAnnotation（即 PDF 原生下拉框），其 options 属性（如答案中提到的 WidgetAnnotation.options）用于控制下拉选项内容，但该属性不控制字段本身的名称（FieldName），而是控制用户可选的表单值（如 "Yes"/"No"）。二者职责不同，请勿混淆。
- 所有注解变更需调用 docEditor.flushChanges() 或确保 autoSave 启用，以持久化到 PDF 文档流。
总结
将“Field Name”设为下拉选择，本质是增强表单配置的规范性与安全性——避免拼写错误、非法字符或命名冲突。虽然 PDFTron 未提供开箱即用的 UI 组件切换方案，但借助其灵活的 Annotation API 和 Mendix 的前后端协同能力，完全可通过自定义 DOM 控件 + 注解重建逻辑实现。建议将字段名列表维护在 Mendix 实体中，并配合权限控制，确保下拉选项始终与业务规则保持一致。
