PC端
>离线部署后,需要将js文件地址替换成自己的本地地址
http://dubbo.wellsign.cn/sdk/context/ws.pc.plugin.min.js
替换成
http://ip地址+端口/sdk/context/ws.pc.plugin.min.js
demo如下,[点此下载](https://wellsign-public.oss-cn-hangzhou.aliyuncs.com/demo/%E7%AD%BE%E5%90%8D%E6%9D%BF%E6%8F%92%E4%BB%B6demo.zip)
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>:)</title>
<script type="text/javascript" src="http://dubbo.wellsign.cn/sdk/context/ws.pc.plugin.min.js"></script>
<script type="text/javascript">
window.onload = function () {
window.document.getElementById('dom-id-btn').onclick = function () {
// 实例化
var plugin = new WSPcPlugin();
// 配置
var pluginOption = {
// 设置返回签名svg数据的style属性,默认{ height: '200px', width: '200px' } 必须是 px 单位
svgStyle: { height: '200px', width: '200px' },
// 获取到 二维码的回调
OnQrcode: function (base64, url) {
window.document.getElementById('dom-id-qrcode').setAttribute('src', base64)
console.log(url)
},
// 成功获取签字数据的回调 IE8不支持svg 所以 base64 是返回的图片
OnSuccess: function (svgStr, imgBase64) {
try {
window.document.getElementById('dom-id-sign-svg').innerHTML = svgStr
} catch (e) {
}
window.document.getElementById('dom-id-sign-img').setAttribute('src', imgBase64)
},
// 发生错误的回调
OnError: function (err) {
console.log(err)
},
// 关闭的回调,包括超时
OnClose: function () {
console.log('关闭了')
}
};
// 初始化
plugin.Init(pluginOption);
// 销毁
}
// 签字版 svg
window.document.getElementById('btn2').onclick = function () {
// 实例化
var plugin = new WSPcPlugin();
// 配置
var pluginOption = {
// 设置返回签名svg数据的style属性,默认{ height: '100%', width: '100%' }
svgStyle: { height: '200px', width: '200px' },
// 签字数据类型 svg image
dataType: 'svg', // 默认 svg
// 成功获取签字数据的回调
OnSuccess: function (svgStr, imgBase64) {
try {
window.document.getElementById('signname2').innerHTML = svgStr
} catch (e) {
}
window.document.getElementById('signname3').setAttribute('src', imgBase64)
},
// 发生错误的回调
OnError: function (err) {
console.log(err)
},
// 关闭的回调,包括超时
OnClose: function () {
console.log('关闭了')
}
};
// 初始化
plugin.InitForMouse(pluginOption);
// 销毁
// plugin.Destroy()
// end
}
}
</script>
</head>
<body>
<!-- 1 -->
<div style="height: 230px; padding: 10px; border: 1px solid #eaeaea">
<div><button id="dom-id-btn">手机扫码签字 点我获取 连接 二维码地址</button></div>
<img id="dom-id-qrcode" style="border: 1px solid #00a0ff; height: 200px; width: 200px; float: left;"/>
<div id="dom-id-sign-svg" style="border: 1px solid #00a0ff; height: 200px; width: 200px; float: left;"></div>
<img id="dom-id-sign-img" style="border: 1px solid #00a0ff;float: left;height: 200px; width: 200px "/>
</div>
<!-- 2 -->
<div class="wrap">
<div><button id="btn2">PC签字板签字</button></div>
<div id="signname2" class="result"></div>
<img id="signname3" class="result"/>
</div>
<!-- end -->
</body>
<style>
.wrap {
height: 230px;
padding: 10px;
border: 1px solid #eaeaea;
}
.result {
border: 1px solid #00a0ff;
height: 200px;
width: 200px;
float: left;
}
</style>
</html>
```