福昕开发者文档中心

自定义动态图章 ​

动态图章与标准图章的区别 ​

类型依赖条件需要准备的文件支持的内容
动态图章uix-addons/customer-dynamic-stamp 插件（默认包含在 AllInOne.js 中）图片支持设置背景图片、文本、字体、颜色及其位置
标准图章无PDF 和 svgimage

TIP

如果您没有使用 AllInOne.js，请确保在 Foxit PDF SDK for Web 初始化时引用了 customer-dynamic-stamp 插件。

创建自定义动态图章的流程 ​

Foxit PDF SDK for Web 在 Complete WebViewer（以下简称 UI）中提供了一套默认的动态图章操作流程。您可以访问 Comment -> Create -> Create Dynamic Stamp 来体验这个功能。

实现流程

  1. UI 默认提供前端预处理的背景图片
  2. 用户输入动态图章所需的目录、名字与文本等信息
  3. UI 将这些数据传输给 PDF Data 层
  4. PDF Data 层根据收到的数据：
    • 绘制预处理图片
    • 生成文本表单域
    • 实时更新表单域数据
    • 导出图片
    • 传给 UI 层作为图章列表的图章图片（icon）
  5. 用户从图章列表中选择创建的动态图章 icon
  6. 在页面点击创建图章时，图章数据会与 PDF Data 层同步，预示动态图章创建成功

创建自定义动态图章 ​

UI 方式创建 ​

用户可以通过点击 UI 上的 Comment -> Create -> Create Dynamic Stamp 来直接创建自定义动态图章。其中动态图章的背景图片可以通过接口方式传入并由用户管理。

javascript
// 获取自定义动态图章模板的下拉组件
const templates = await pdfui.getComponentByName("stamp-templates");

// 通过 append 方法导入下拉按钮及其回调函数
templates.append("<dropdown-button name='test' url='xxx.png'>test</dropdown-button>", [{
    target: 'test',
    config: {
        // 设置回调函数
        callback: async function () {
            // 获取自定义动态图章的对话框组件
            const dialog = await pdfui.getComponentByName("fv--custom-dynamic-stamp-dialog")
            // 设置相应的模板信息
            dialog.controller.selectTemplate({name: 'test', url: "xxx.png"})
        }
    }
}])

接口方式创建 ​

添加自定义动态图章 ​

javascript
var param = [{
    category: 'stamp',
    name: 'MyStamp',
    fileData: 'http://stamp.png',
    field: {
        textType: PDFViewCtrl.PDF.constant.STAMP_TEXT_TYPE.CUSTOM_TEXT,
        value: 'custom text', // 自定义文本
        font: { // 可选
            name: 'Helvetica', // 字体
            color: 0, // 文本颜色
        },
        rect: {  // PDF 坐标
            left: 0,
            right: 30,
            top: 30,
            bottom: 0,
        }
    },
}]
// 添加自定义动态图章
pdfui.callAddonAPI('CustomDynamicStamp', 'setDynamicStamp', [param])

移除自定义动态图章 ​

javascript
var param = [{
    category: 'stamp', // 动态图章的目录
    names: [
        'MyStamp', // 动态图章的名称
    ]
}]
// 移除自定义动态图章
pdfui.callAddonAPI('CustomDynamicStamp', 'removeDynamicStamp', [param])

获取所有自定义动态图章 ​

javascript
// 获取动态图章列表
pdfui.callAddonAPI('CustomDynamicStamp', 'getDynamicStamp')