# 电子签章

# 简介

签章控件用于对用户上传PDF附件加盖电子印章，加盖印章功能的后端通过调用Signature APIs实现，流程填表页需要用户确定加盖电子印章的位置，用签章IFrame控件就可以轻松实现前端用户的交互。

签章控件包括2部分，一是界面上的签章按钮，当用户上传了PDF文件后可以控制显示这个签章按钮。

当用户按了这个按钮后，显示一个flyout窗口，这个窗口里会显示需要签章的PDF文件的所有页，用户点击PDF任意位置即表示在该位置签章，签章后用户也可以通过拖拽的方式修改签章位置，通过界面上显示的签章列表里的删除按钮删除已签的章。

# 表单配置

为了盖电子印章，开发者至少需要在表单上加三个字段：

# 上传文件控件字段

这是一个File类型的控件，用户可以通过这个控件上传需要盖章的文件，为了以下举例方便，假设起名为fieldFile，注意只支持PDF格式，所以需要限制一下FileTypes属性。如果希望用户可以上传其它格式，但是只在用户传了PDF后才开启加盖电子印的功能，那么无须限制FileTypes属性，可以用这个文件控件字段值上的mime属性是否是appliaction/pdf来控制是否显示签章控件。

# 签章控件字段

这就是签章IFrame控件，当然数据类型是anyURI，假设起名为fieldSignButton。这个控件的rowVisible需要根据fieldFile上传文件的类型来定，可以设置fieldSignButton的rowVisible如下

值表达式: $fieldFile!='' && $fieldFile.mime=='application/pdf'
条件表达式: 留空即可

1
2

这个控件的动态值设置以下两个：

文件没上传或者传的不是PDF时候需要清空，所以如下设置动态公式

动态公式值 : ''
动态公式条件 : $fieldFile=='' || $fieldFile.mime!='application/pdf'

1
2

文件已上传且是PDF文件需要设置签章控件的URI，所以如下设置动态公式

动态公式值 : 'https://esign.sjtu.edu.cn/iframe/button.html?icon=true&bw=100&bh=27&pid=ZZZ&file='+endcodeURIComponent($fieldFile.uri)
动态公式条件 : $fieldFile !='' && $fieldFile.mime=='application/pdf'

1
2

其中https://esign.sjtu.edu.cn/iframe/button.html (opens new window)是签章控件的访问地址，其中用到的参数以下参数配置中会详细说明，这里需要注意的是file参数的内容需要用endcodeURIComponent方法对$fieldFile.uri调用一下再使用。

# 签章位置字段

这个位置字段是个隐藏控件，数据类型string，通过动态公式记录用户在签章控件中点选的位置值，其格式是pageNo|x|y，多个位置以英文逗号分隔，位置值可以用于调用Signature APIs时作为locations参数。例如，'2|400|200,3|450|100'表示在第二页和第三页各有一个签章，坐标是(400,200)和(450,100)，那么将其组装成以下locations参数用于调用Signature APIs。

[
  {
    "pageNo": 2,
    "x": 400,
    "y": 200
  },
  {
    "pageNo": 3,
    "x": 450,
    "y": 100
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13

签章位置字段需要通过一个动态公式来获取签章控件里用户点选的位置

动态公式值 : $fieldSignButton.signs
动态公式条件 : 留空即可

1
2

# 参数配置

签章控件支持很多可选参数用于定制化UI，分别如下

参数名	类型	描述
icon	boolean	按钮上是否带有图标
bw	number	按钮宽度
bh	number	按钮高度
pid	string	电子签章编码，由签章API提供，首次使用请联系kkren
file	string	签章文件的路径，注意搭配encodeURIComponent使用
type	string	类型，当是b的时候是按钮，否则是链接
text	string	按钮上的文字，缺省是'签章'
title	string	签章窗口的标题，缺省是'电子签章'
width	number	pc版签章窗口宽度，缺省800，移动端占满屏幕

# 签章调用

# 调用时机

请根据流程实际需求决定签章时机，一般来说这个签章操作应该在最后一步审核通过后进行。

# 调用参数

签章API的文档请参考，其中eSignCode请联系业务部门或签章API的管理员kkren获取，file参数需要从表单上传的文件URL中下载获取，locations参数请参考上述的签章位置字段部分。

← 内置控件列表评分 →