自定义签名 UI
概述
从 11.0.0 版本开始,福昕 PDF SDK Web 版 提供了一套完整的签名 UI 自定义接口。通过实现 IViewerUI
以及相关接口,开发者可以轻松自定义签名、验签以及签名属性展示等功能界面。这些接口由 福昕 PDF SDK Web 版 内部调用,开发者只需按照接口规范实现相应的功能即可。
核心接口说明
IViewerUI.getSignatureUI()
功能描述
- 获取数字签名 UI 管理实例,用于访问签名相关对话框接口
- 该接口由 福昕 PDF SDK Web 版 内部调用,开发者只需实现该方法并返回
ISignatureUI
实例
方法定义
typescript
getSignatureUI(): Promise<ISignatureUI>;
ISignatureUI
功能描述
- 签名功能 UI 总控接口,适用于 11.0.0 及更高版本
- 该接口提供了三个核心对话框的访问入口
- 该接口由 福昕 PDF SDK Web 版 调用,开发者需要实现以下方法
方法列表
方法 | 返回值类型 | 说明 |
---|---|---|
getSignDocumentDialog() | Promise<ISignDocDialog> | 返回文档签名对话框实例 |
getSignVerifiedResultDialog() | Promise<ISignVerifiedResultDialog> | 返回验签结果对话框实例 |
getSignedPropertiesDialog() | Promise<ISignedSignaturePropertiesDialog> | 返回签名属性对话框实例 |
对话框接口详解
文档签名(ISignDocDialog)
功能描述
- 该对话框用于处理文档签名
- 该接口由 福昕 PDF SDK Web 版 调用,开发者需要实现以下方法
方法说明
typescript
interface ISignDocDialog {
// 打开签名对话框
openWith(
signature: Widget,
okCallback: (data: SignDocInfo) => Promise<void> | void,
cancelCallback?: () => Promise<void> | void
): Promise<void>;
// 检查对话框是否已打开
isOpened(): boolean;
// 获取当前签名组件
getCurrentSignature(): Widget | undefined;
// 隐藏对话框
hide(): void;
// 释放资源
destroy(): void;
}
示例
typescript
class CustomSignDocDialog implements ISignDocDialog {
private isDialogOpen = false;
private currentSignature: Widget | undefined;
async openWith(
signature: Widget,
okCallback: (data: SignDocInfo) => Promise<void> | void,
cancelCallback?: () => Promise<void> | void
) {
this.isDialogOpen = true;
this.currentSignature = signature;
// 实现自定义对话框逻辑
showCustomSignDialog(signature, okCallback, cancelCallback);
}
isOpened(): boolean {
return this.isDialogOpen;
}
getCurrentSignature() {
return this.currentSignature;
}
hide() {
this.isDialogOpen = false;
hideCustomSignDialog();
}
destroy() {
this.hide();
cleanupResources();
}
}
验签结果(ISignVerifiedResultDialog)
功能描述
- 该对话框用于展示签名验证结果
- 该接口由 福昕 PDF SDK Web 版 调用,开发者需要实现以下方法
方法说明
typescript
interface ISignVerifiedResultDialog {
// 显示验签结果
openWith(signature: ISignatureField): Promise<void>;
// 检查对话框是否已打开
isOpened(): boolean;
// 获取当前签名字段
getCurrentSignature(): ISignatureField | undefined;
// 隐藏对话框
hide(): void;
// 释放资源
destroy(): void;
}
示例
typescript
class CustomVerifyDialog implements ISignVerifiedResultDialog {
private isDialogOpen = false;
private currentSignature: ISignatureField | undefined;
async openWith(signature: ISignatureField) {
this.isDialogOpen = true;
this.currentSignature = signature;
// 实现自定义验签结果展示逻辑
showCustomVerifyResult(signature);
}
isOpened(): boolean {
return this.isDialogOpen;
}
getCurrentSignature() {
return this.currentSignature;
}
hide() {
this.isDialogOpen = false;
hideCustomVerifyResult();
}
destroy() {
this.hide();
cleanupResources();
}
}
签名属性 (ISignedSignaturePropertiesDialog)
功能描述
- 该对话框用于展示已签名的字段属性
- 该接口由 福昕 PDF SDK Web 版 调用,开发者需要实现以下方法
方法说明
typescript
interface ISignedSignaturePropertiesDialog {
// 打开签名属性对话框
openWith(signature: ISignatureField): Promise<void>;
// 检查对话框是否已打开
isOpened(): boolean;
// 隐藏对话框
hide(): void;
// 释放资源
destroy(): void;
}
示例
typescript
class CustomPropertiesDialog implements ISignedSignaturePropertiesDialog {
private isDialogOpen = false;
async openWith(signature: ISignatureField) {
this.isDialogOpen = true;
// 实现自定义签名属性展示逻辑
showCustomSignatureProperties(signature);
}
isOpened(): boolean {
return this.isDialogOpen;
}
hide() {
this.isDialogOpen = false;
hideCustomSignatureProperties();
}
destroy() {
this.hide();
cleanupResources();
}
}
集成示例
typescript
class CustomSignatureUI implements ISignatureUI {
async getSignDocumentDialog() {
return new CustomSignDocDialog();
}
async getSignVerifiedResultDialog() {
return new CustomVerifyDialog();
}
async getSignedPropertiesDialog() {
return new CustomPropertiesDialog();
}
}
class CustomViewerUI extends PDFViewCtrl.IViewerUI {
async getSignatureUI() {
return new CustomSignatureUI();
}
}
// 初始化时注入自定义 UI
new PDFViewer({
viewerUI: new CustomViewerUI(),
// 其他配置...
});
注意事项
接口实现规范
- 必须严格按照接口定义实现所有方法
- 确保返回值的类型与接口定义一致
资源管理
- 在
destroy()
方法中释放所有相关资源 - 避免内存泄漏
- 在
异步处理
- 所有异步方法需正确处理 Promise
- 确保在操作完成后再 resolve Promise
兼容性
- 确保实现的功能与 福昕 PDF SDK Web 版 默认行为一致
- 避免破坏现有签名流程
通过以上接口实现,开发者可以完全自定义签名相关的 UI 界面,同时确保与 福昕 PDF SDK Web 版 的无缝集成。