ComPDF
联系销售
DemoAPI 参考文档FAQ
、

PDF 生成模板编辑器

开源可视化 PDF 生成引擎，支持自定义模板，并提供面向开发者的 API，灵活构建文档生成流程。

查看 GitHub

签名 ​

WebViewer 同时支持电子签名（绘制/键入/上传）和数字签名（基于证书）。本指南介绍 UI 侧签名 API 与组件。

签名密码学与 PDF 集成位于闭源 Core 引擎。UI 层通过 core 桥接层驱动，并在 viewer 与 document store 中镜像签名状态。

UI API ​

启用/禁用签名工具 ​

javascript
UI.enableSignatureTool();     // useViewer.setDisableSignatureTool(false)
UI.disableSignatureTool();    // useViewer.setDisableSignatureTool(true)

自动跳转 ​

javascript
UI.setAutoJumpNextSign(true);   // useDocument.setAutoJumpNextSign(!!value)

启用后，签署一个签名后查看器自动跳到下一个签名字段。

签名对话框配置 ​

javascript
UI.setSignatureDialogTabs(['keyboard', 'trackpad']);          // 对话框显示的标签
UI.setEnableSignatureTemplates(true);                         // 启用签名模板
UI.setSignatureDialogProperties('keyboard', { color: '#000000', lineWidth: 2 }, false);
APIStore action用途
setSignatureDialogTabs(value)useViewer.setSignatureDialogTabs配置签名对话框显示的标签。
setEnableSignatureTemplates(value)useViewer.setEnableSignatureTemplates启用/禁用签名模板（"mySignatures" 列表 + 创建标签）。
setSignatureDialogProperties(type, properties, replace=false)useViewer.setSignatureDialogProperties设置某对话框类型（KEYBOARD/TRACKPAD）的属性（颜色、字体、线宽）。replace 为替换或合并。

签名状态（viewer store） ​

字段用途
signatureDialogTabs签名对话框显示的标签。
signatureDialogProperties按标签的属性（KEYBOARD/TRACKPAD 颜色、字体、线宽）。
enableSignatureTemplates是否启用模板。
disableSignatureTool是否禁用签名工具。
digitalSignature{ preview, certSubject }。
selectedSignatureField当前选中签名字段。
electronicSignaturesList / digitalSignaturesList已保存签名列表（持久化到 localStorage）。

document store 持有 signatures[]、selectedSignature、trustedCertificateLists[]、pkcs12、disableDigitalSignature、disableElectronicSignature、autoJumpNextSign。

签名组件 ​

  • SignCreatePanel.vue（components/Signatures/）——全屏电子签名创建/管理面板。启用模板时两个标签："mySignatures" 列表和 "create"（键盘/触控板/上传图片子标签）。通过 useViewer.isElementOpen(SIGN_CREATE_PANEL) 切换。
  • SignCreateDialog.vue ——签名创建器的对话框变体，通过 SIGNATURE_DIALOG 切换。
  • DigitalSignCreatePanel.vue / DigitalKeyboardCreatePanel.vue ——数字签名创建（证书/键盘输入）。
  • SignatureContainer.vue（components/SignatureContainer/）——左面板签名标签内容。
  • SignatureToolBar ——签名模式工具栏。

相关对话框：SelectSignTypeDialog、SignatureAppearanceDialog、SignatureDetailsDialog、DeleteSignatureDialog、AddDigitalFileDialog、CertificationViewerDialog。

Core 桥接层（签名接口） ​

core 桥接层在 instance.Core 上暴露：

函数用途
handleSign应用签名。
getSignature / deleteSignature获取/删除签名。
verifySignature / getVerificationResult验证签名。
loadCertificates / addToTrustedCertificateLists证书管理。
checkCertificateIsTrusted信任检查。
setAutoJumpNextSign自动跳转（引擎侧）。

示例 ​

启用签名工具并自动跳转 ​

javascript
UI.enableSignatureTool();
UI.setAutoJumpNextSign(true);

配置签名对话框 ​

javascript
UI.setSignatureDialogTabs(['keyboard', 'trackpad', 'upload']);
UI.setSignatureDialogProperties('keyboard', { color: '#0000ff', lineWidth: 3 });
UI.setEnableSignatureTemplates(true);

打开签名创建面板 ​

javascript
UI.openElement('signCreatePanel');

相关 ​