signature-web

页面签章插件

标签引入方式

<link rel="stylesheet" href="https://unpkg.com/signature-web/lib/signature-web.css">
<script src="https://unpkg.com/signature-web/lib/signature-web.umd.min.js"></script>

npm 安装

npm install signature-web

initSignature方法参数说明

Signature类参数说明

插件方法/类说明

Signature实例的方法说明

使用步骤

1、初始化签章

必须在页面初始化的时候执行下方代码

  window.testSignature = null
  initSignature({
      busNo: "", //业务主键序列号不能重复
      appCode: "", //应用编号
      url:"",
      type:"2",
    }).then(() => {

        //签章数据源
        let options = {
          //展示签章图片的dom
          showImgNode: document.getElementById("showImgNodeId"),
          width: 200,
          height: 200,
          //保护HTML内容的标识符
          nodeTag:"sg"
        }
        testSignature = new Signature(options)
    })
  }

2、签章

testSignature.signature()

注：testSignature为初始化中 Signature 实例对象      

标签引入使用示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/signature-web/lib/signature-web.css">
  <script src="https://unpkg.com/signature-web/lib/signature-web.umd.min.js"></script>

</head>

<body>
  <div sg>测试html受保护内容</div>
  <div id="ss" onclick="sig()">点击签章</div>

  <script>
    let testSignature = null
    window.onload = function () {

      initSignature({
        busNo: 6, //业务主键序列号不能重复
        appCode: "tianqin", //应用编号
        url:"",
        type:"2",
      }).then(() => {
        //需要签章的数据
        let sgList = [{
            //展示签章图片的dom
            showImgNode: document.getElementById("ss"),
            //保护HTML内容的标识符
            nodeTag: "sg"
          },

        ]
        sgList.map(item => {
          //创建签章数据源
          let options = {
            showImgNode: item.showImgNode,
            width: 200,
            height: 200,
            nodeTag: item.nodeTag
          }
          testSignature = new Signature(options)
        })

      })
    }


    function sig() {
      testSignature.signature()
    }
  </script>

</body>

</html>

npm 方式使用示例（vue）

<template>
  <div id="app">
    <input type="text"
           sgone
           value="sgone保护内容">
    <p sgone>sgone保护内容</p>
    <p sg>sg保护内容</p>
    <div @click="sign('sgone')"
         id="sgone"
         style="margin-left:300px;margin-top:100px">
      点击签章（sgone）
    </div>
   
    <div @click="sign('sg')"
         id="sg"
         style="margin-left:300px;margin-top:100px">
      点击签章（sg）
    </div>

    <div @click="validSeal()">验全部章</div>
    <div @click="deleteSeal()">删除全部章</div>
    <div @click="taggerSeal()">显示/隐藏全部章</div>
  </div>
</template>

<script>
import { initSignature, Signature } from "signature-web"
import "signature-web/lib/signature-web.css"

export default {
  mounted() {
    initSignature({
      busNo: 5,//业务主键序列号不能重复
      appCode: "tianqin",//应用编号
      url: "",
      type: '2',//业务类型 1-企业签章，2-个人签章
    }).then(() => {
      let sgList = [
        {
          showImgNode: document.getElementById("sg"),
          nodeTag: "sg"
        },
        {
          showImgNode: document.getElementById("sgone"),
          nodeTag: "sgone"
        }
      ]
      this.$nextTick(() => {
        sgList.map(item => {
          let options = {
            showImgNode: item.showImgNode,
            width: 200,
            height: 200,
            nodeTag: item.nodeTag
          }
          this[item.nodeTag] = new Signature(options)
        })

      })
    })


  },
  methods: {
    //签章
    sign(tag) {
      if (this[tag]) {
        this[tag].signature()
      }

    },
    //校验所有签章
    validSeal() {
      this.sgone.validSeal()
      this.sg.validSeal()
    },
    //删除所有章
    deleteSeal() {
      this.sgone.deleteSeal()
      this.sg.deleteSeal()
    },
    //显示\隐藏所有章
    taggerSeal() {
      this.sgone.toggleSeal()
      this.sg.toggleSeal()
    },
  }
}
</script>