gd-signature-v2

语雀文档: https://www.yuque.com/docs/share/7413f933-64d1-41d2-99ed-426203b7a01a?# 《gd-signature 使用文档》 -

Usage no npm install needed!

<script type="module">
  import gdSignatureV2 from 'https://cdn.skypack.dev/gd-signature-v2';
</script>

README

国盾js签章插件 使用文档

2021.09.23

增加自由签署批量签署印章功能

2021.08.20

增加pc端顶部隐藏功能 gd-signature-v2@1.0.21

2021.08.06

优化代码逻辑 gd-signature-v2@1.0.20

  • 优化代码
  • 文档更新

2021.07.06

签名域签章增加多页渲染模式 gd-signature-v2@1.0.15

  • 签名域签章增加多页渲染模式
  • 参考 app-position-img-shandong.html

2021.04.15

升级渲染方式 gd-signature-v2@1.0.2

  • pc端和app端改为多页渲染模式,调用方式不变
  • 支持授权印章

一、插件依赖

动态加载,如果用户环境有这两个插件,则不加载

  • jq
  • pdf.js

二、使用方法

2.1、标签引入(推荐)


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gd-signature-v2/dist/main.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gd-signature-v2/dist/pdfjsWorker.bundle.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gd-signature-v2/dist/static/css/index.css">

2.2、npm

# 使用最新版本
npm i gd-signature-v2 -S

# 特定版本
npm i gd-signature-v2@x.x.x -S

页面引用

import GDsignature from 'gd-signature-v2'
// const GDsignature = require('gd-signature')
import 'gd-signature-v2/dist/static/css/less.css'

三、功能介绍

3.1、更改插件主题色

覆盖less变量即可

  • @--color-primary 主题色覆盖
  • @--color-primary-border border颜色覆盖

标签方式修改主题色


<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<script>
    less.modifyVars({
        '@--color-primary': '#DE2921', // 主题修改为红色
        '@--color-primary-border': '#DE2921' // border颜色修改
    })
</script>

3.2、pc端自由签署 new GDsignature.manual({})

  • html

<div>
    <label for="用户id">用户id:</label>
    <input id="userId" placeholder="请输入用户id" type="text"/>
</div>
<div>
    <label for="合同id">合同id:</label>
    <input id="abc" placeholder="请输入合同id" type="text"/>
</div>
<button onclick="handleclick()">签章</button>

new GDsignature.manual
start 需要配置 contract_iduser_id

function handleclick() {
    const contract_id = $('#abc').val()
    const userId = $('#userId').val()
    signature.start({
        contract_id: contract_id,
        user_id: userId,
        success: function (res) {
            console.log(res)
        },
        error: function (err) {
            console.log(err)
        }
    })
}

const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.manual({
    baseUrl: 'http://192.168.1.206:8000/api', // paas地址
    getToken() {
        return new Promise((reslove, reject) => {
            axios
                .post(`${baseUrl}/getToken`) // 根据实际需求做修改
                .then(res => {
                    console.log(res)
                    reslove(res.data.data.access_token)
                })
                .catch(err => {
                    reject()
                })
        })
    },
    getSign(body) {
        return new Promise((reslove, reject) => {
            axios  // 地址根据实际需求做修改
                .post(`${baseUrl}/getSign`, body.data, {
                    headers: {
                        Authentication: body.token
                    }
                })
                .then(res => {
                    reslove(res.data.data.sign)
                })
                .catch(err => {
                    console.log(err)
                    reject()
                })
        })
    }
})
  • 示例

3.3、自动签署 new GDsignature.auto({})

  • html

<div id="demo">
    <label for="预处理id" style="font-size:.24rem">预处理id:</label>
    <input id="preparid" placeholder="请输入预处理id" type="text"/>
    <button onclick="handleclick()">签章</button>
</div>


new GDsignature.auto

start 需要配置 prepare_id

function handleclick() {
    preparid = $('#preparid').val()
    signature.start({
        prepare_id: preparid, // 预处理id
        success: function (res) {
            console.log(res)
        },
        error: function (err) {
            console.log(err)
        },
    })
}

const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.auto({
    baseUrl: 'http://192.168.1.206:8000/api', // paas地址
    getToken() {
        return new Promise((reslove, reject) => {
            axios
                .post(`${baseUrl}/getToken`) // 根据实际需求做修改
                .then(res => {
                    console.log(res)
                    reslove(res.data.data.access_token)
                })
                .catch(err => {
                    reject()
                })
        })
    },
    getSign(body) {
        return new Promise((reslove, reject) => {
            axios  // 地址根据实际需求做修改
                .post(`${baseUrl}/getSign`, body.data, {
                    headers: {
                        Authentication: body.token
                    }
                })
                .then(res => {
                    reslove(res.data.data.sign)
                })
                .catch(err => {
                    console.log(err)
                    reject()
                })
        })
    }
})
  • 示例
 自动签署需预设id,暂未配置示例

3.4、h5自由签署 + 拒签 new GDsignature.appManual({})

  • html

<div id="demo">
    <div>
        <label for="用户id">用户id:</label>
        <input id="userId" placeholder="请输入用户id" type="text"/>
    </div>
    <div>
        <label for="合同id">合同id:</label>
        <input id="abc" placeholder="请输入合同id" type="text"/>
    </div>
    <button onclick="handleclick()">签章</button>
</div>

new GDsignature.appManual

function handleclick() {
    let contract_id = $('#abc').val()
    let userId = $('#userId').val()
    signature.start({
        contract_id: contract_id,
        user_id: userId,
        //加入此回调,证明业务需要拒签,需要自己业务实现
        refuseSign: function (re) {
            // 使用此回调插件会显示拒签按钮,re里面的数据是用户ID跟合同ID,拒签实际操作逻辑还需业务系统自己去写
            console.log('re', re);
        },
        success: function (res) {
            console.log(res)
        },
        error: function (err) {
            console.log(err)
        }
    })
}

const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.appManual({
    baseUrl: 'http://192.168.1.206:8000/api', // paas地址
    getToken() {
        return new Promise((reslove, reject) => {
            axios
                .post(`${baseUrl}/getToken`) // 根据实际需求做修改
                .then(res => {
                    console.log(res)
                    reslove(res.data.data.access_token)
                })
                .catch(err => {
                    reject()
                })
        })
    },
    getSign(body) {
        return new Promise((reslove, reject) => {
            axios  // 地址根据实际需求做修改
                .post(`${baseUrl}/getSign`, body.data, {
                    headers: {
                        Authentication: body.token
                    }
                })
                .then(res => {
                    reslove(res.data.data.sign)
                })
                .catch(err => {
                    console.log(err)
                    reject()
                })
        })
    }
})
  • 示例
#### 3.5、PC固定签名域签章 `new GDsignature.signDomain({})`
  • html

<div>
    <label for="用户id">用户id:</label>
    <input id="userId" placeholder="请输入用户id" type="text"/>
</div>
<div>
    <label for="合同id">合同id:</label>
    <input id="abc" placeholder="请输入合同id" type="text"/>
</div>
<button onclick="handleclick()">签章</button>

new GDsignature.signDomain
start 需要配置 contract_iduser_id

function handleclick() {
    const contract_id = $('#abc').val()
    const userId = $('#userId').val()
    signature.start({
        contract_id: contract_id,
        user_id: userId,
        domain: [
            {x: 300, y: 170, page: 1, name: '财务章区域1'},
            {x: 500, y: 470, page: 1, name: '财务章区域2'},
            {x: 350, y: 180, page: 4, name: '人事章区域'}
        ],//需要填充的签名域坐标集合
        success: function (res) {
            console.log(res)
        },
        error: function (err) {
            console.log(err)
        }
    })
}

const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.signDomain({
    baseUrl: 'http://192.168.1.206:8000/api', // paas地址

    getToken() {
        return new Promise((reslove, reject) => {
            axios
                .post(`${baseUrl}/getToken`) // 根据实际需求做修改
                .then(res => {
                    console.log(res)
                    reslove(res.data.data.access_token)
                })
                .catch(err => {
                    reject()
                })
        })
    },
    getSign(body) {
        return new Promise((reslove, reject) => {
            axios  // 地址根据实际需求做修改
                .post(`${baseUrl}/getSign`, body.data, {
                    headers: {
                        Authentication: body.token
                    }
                })
                .then(res => {
                    reslove(res.data.data.sign)
                })
                .catch(err => {
                    console.log(err)
                    reject()
                })
        })
    }
})
  • 示例
#### 3.6、移动端h5坐标签章 `new GDsignature.AppPositionImgSign({})`
  • html

<div>
    <label for="用户id">用户id:</label>
    <input id="userId" placeholder="请输入用户id" type="text"/>
</div>
<div>
    <label for="合同id">合同id:</label>
    <input id="abc" placeholder="请输入合同id" type="text"/>
</div>
<button onclick="handleclick()">签章</button>

new GDsignature.AppPositionImgSign
start 需要配置 contract_iduser_id

function handleclick() {
    const contract_id = $('#abc').val()
    const userId = $('#userId').val()
    signature.start({
        contract_id: contract_id,
        user_id: userId,
        domain: [
            {x: 100, y: 170, page: 1},
            {x: 300, y: 470, page: 2},
            {x: 350, y: 180, page: 4}
        ],//需要填充的签名域坐标集合
        success: function (res) {
            console.log(res)
        },
        error: function (err) {
            console.log(err)
        }
    })
}

const baseUrl = 'http://192.168.2.77:9998'   // 业务系统url
const signature = new GDsignature.AppPositionImgSign({
    baseUrl: 'http://192.168.1.206:8000/api', // paas地址

    getToken() {
        return new Promise((reslove, reject) => {
            axios
                .post(`${baseUrl}/getToken`) // 根据实际需求做修改
                .then(res => {
                    console.log(res)
                    reslove(res.data.data.access_token)
                })
                .catch(err => {
                    reject()
                })
        })
    },
    getSign(body) {
        return new Promise((reslove, reject) => {
            axios  // 地址根据实际需求做修改
                .post(`${baseUrl}/getSign`, body.data, {
                    headers: {
                        Authentication: body.token
                    }
                })
                .then(res => {
                    reslove(res.data.data.sign)
                })
                .catch(err => {
                    console.log(err)
                    reject()
                })
        })
    }
})
  • 示例

四、属性,回调函数

4.1、baseUrl

paas api 接口

4.2、auto_close

签章成功后是否自动关闭 默认值 false

4.3、showClose

是否显示关闭按钮 默认是 true

4.4、VerifyCode

是否开启签章验证码校验 默认值 true

4.5、authSign

是否使用认证服务签章 默认值 false

4.6、authBaseUrl

认证服务器地址, authSigntrue 时必须传

4.7、flowId

认证服务器需要的流程id, authSigntrue 时必须传

4.8、success Function(res) 

  • start()中使用
  • 签署成功的回调函数

4.9、error Function(error) 

  • start()中使用
  • 签署失败的回调函数

4.10、refuseSign Function(data) 

  • start()中使用
  • 拒签回调函数

4.11、lastPageSign

是否最后页签章, lastPageSigntrue 限定最后页签章,默认false

4.12、domain 签名域签章时使用

业务需要签名的区域集合,数组类型,结构如下:

{
    x:"",  // x 坐标  A4当前页面绝对坐标值  必填
        y
:
    "",  // y 坐标  A4当前页面绝对坐标值  必填
        page
:
    "",  // 页码值 待签署页码  必填
        name
:
    "", // 签名域高亮显示时签名域名称,选填,如填写则展示该名称,数组内唯一
        sealId
:
    "", // 印章id ***** 预留字段 暂时不填充,可考虑为在用户印章列表中直接获取印章填充
        w
:
    "",   // 印章宽度  ***** 预留字段 暂时不填充,考虑为当前签名域固定宽度
        h
:
    ""   // 印章高度  ***** 预留字段 暂时不填充,考虑为当前签名域固定高度
}

4.13、paas

是否使用paas的key模式, paastrue paaskey模式,默认false

4.14、certType

证书类型配置, {person: 'event', company: 'common'},默认{person: 'event', company: 'common'} 可选类型:event或common

4.15、sign_id

自定义签署ID

使用示例

const signature = new GDsignature.manual({
    baseUrl: 'https://open.aiosign.com/api', // paas-api接口 写死这个地址就好
    auto_close: true,// 签章成功后是否自动关闭签章 默认falase
    showClose: false, // 是否显示关闭按钮,默认为true
    VerifyCode: true, // 是否开启签章验证码校验,默认为true
    authSign: false, //使用认证服务器签章-默认为false
    authBaseUrl: 'http://192.168.2.199:8099/', //认证服务器地址-authSign为true时必须传
    flowId: '744918968410198016',
    getToken() {
    }, // 获取token
    getSign() {
    } // 获取sign
})

signature.start({
    ...
        success
:

function (res) {
    console.log(res) // 签章成功回调
}

,
//加入此回调,证明业务需要拒签,需要自己业务实现
refuseSign: function (re) {
    console.log('re', re);
}
,
error: function (err) {
    console.log(err) // 签章失败回调
}
})

4.16、authSealInfo(已废弃-不再使用此参数)

个人授权印章信息e

使用示例

const signature = new GDsignature.manual({
    baseUrl: 'https://open.aiosign.com/api', // paas-api接口 写死这个地址就好
    getToken() {
    }, // 获取token
    getSign() {
    } // 获取sign
})

signature.start({
    ...
        authSealInfo
:
[{
    "seal_type": "01",
    "seal_id": "d277527c84a090400038da0480208107",
    "size": "42*42",
    "auth_user_id": '10821064991175757824',
    "company_name": '企业名称',
    "file_id": "0f1aa5a4d951a8dbe5d5f147c1ca74d1",
    "seal_name": "测试企业公章-1615798708",
    "status": 1
}],
    success
:

function (res, sealInfo) {
    console.log(res, sealInfo) // 签章成功回调
    //sealInfo 授权的信息
}

,
error: function (err) {
    console.log(err) // 签章失败回调
}
})

4.17、header

是否隐藏顶部的操作栏, headerfalse 不显示顶部,默认true

4.18、batchSign

h5自由签署是否支持印章批量签署本页, batchSigntrue 增加批量签署操作,默认false

4.19、 authSealServerUrl,

插件获取授权印章的外部应用地址(目前只在广西环境使用)

六、对接demo文件

插件对接使用demo.rar

七、在线demo示例

插件在线demo