Gd-signature-zoom NPM

国盾js签章插件使用文档

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

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_id 与 user_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()
                })
        })
    }
})

示例

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_id 与 user_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()
                })
        })
    }
})

示例

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_id 与 user_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

认证服务器地址， authSign 为 true 时必须传

4.7、flowId

认证服务器需要的流程id， authSign 为 true 时必须传

4.8、success `Function(res)`

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

4.9、error `Function(error)`

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

4.10、refuseSign `Function(data)`

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

4.11、lastPageSign

是否最后页签章， lastPageSign 为 true 限定最后页签章，默认false

4.12、domain 签名域签章时使用

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

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

4.13、paas

是否使用paas的key模式， paas 为 true 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) // 签章失败回调
}
})

六、对接demo文件

插件对接使用demo.rar

@babel/core @babel/polyfill @babel/runtime @babel/runtime-corejs2 jquery coco-modal pdfjs-dist

@infinitebrahmanuniverse/nolb-gd @everything-registry/sub-chunk-1727 @zalastax/nolb-gd

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

国盾js签章插件 使用文档

2021.08.06

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

2021.07.06

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

2021.04.15

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

一、插件依赖

二、使用方法

2.1、标签引入(推荐)

2.2、npm

三、功能介绍

3.1、更改插件主题色

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

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

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

四、属性，回调函数

4.1、baseUrl

4.2、auto_close

4.3、showClose

4.4、VerifyCode

4.5、authSign

4.6、authBaseUrl

4.7、flowId

4.8、success Function(res)

4.9、error Function(error)

4.10、refuseSign Function(data)

4.11、lastPageSign

4.12、domain 签名域签章时使用

4.13、paas

4.14、certType

4.15、sign_id

使用示例

4.16、authSealInfo

使用示例

六、对接demo文件

国盾js签章插件使用文档

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

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

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

4.8、success `Function(res)`

4.9、error `Function(error)`

4.10、refuseSign `Function(data)`