electronic-signature

统一电子签名组件

技术栈&工具

• Web Component
• gulp
• rollup
• typescript
• nodejs
• node版本推荐：v14.17.0
• webstrom or vscode: 代码编辑器

效果图

安装

npm i icinfo-electronic-signature

## 如无法安装可使用淘宝镜像
npm i icinfo-electronic-signature --registry https://registry.npmmirror.com

功能

签名采集

代码示例

vue

<script lang="ts">
import { Component, Ref, Vue } from 'vue-property-decorator'
import { useSignature } from 'icinfo-electronic-signature'
import { saveExternalPartySignInfo } from '@/api/upload'

@Component({
    name: 'SignComponent'
})
export default class SignComponent extends Vue {
    @Ref('container') 
    public container!: HTMLDivElement

    public mounted(): void {
        const { useSubmit } = useSignature(this.container, '张三')
        // 返回签名base64 signBase64
        useSubmit((signBase64: string) => {
            // 将base64进行上传即可。如果有ocr需求，可以在上传之前自行进行校验
            // 上传例子
            saveExternalPartySignInfo({ signBase64 }).then(() => {
                console.log('上传成功')
            })

        })
    }
}
</script>

<template>
    <div id="container"></div>
</template>

angular

import { Component, AfterViewInit } from '@angular/core'
import { useSignature } from 'icinfo-electronic-signature'
import { saveExternalPartySignInfo } from '@/api/upload'

@Component({
    selector: 'sig-component',
    template: `
        <div #container></div>
    `
})
export class SignComponent implements AfterViewInit {
    @ViewChild('container', { static: false })
    public container!: ElementRef

    public ngAfterViewInit (): void {
        const { useSubmit } = useSignature(this.container.nativeElement, '张三')
        useSubmit((signBase64: string) => {
            // 将base64进行上传即可。如果有ocr需求，可以在上传之前自行进行校验
            // 上传例子
            saveExternalPartySignInfo({ signBase64 }).then(() => {
                console.log('上传成功')
            })
        })
    }
}

react

import { useRef, useEffect } from 'react'
import { useSignature } from 'icinfo-electronic-signature'
import { saveExternalPartySignInfo } from '@/api/upload'

const SignComponent = () => {
    const containerRef = useRef<HTMLDivElement>()

    useEffect(() => {
        if (containerRef.current) {
            const { useSubmit } = useSignature(this.container, '张三')
            // 返回签名base64 signBase64
            useSubmit((signBase64: string) => {
                // 将base64进行上传即可。如果有ocr需求，可以在上传之前自行进行校验
                // 上传例子
                saveExternalPartySignInfo({ signBase64 }).then(() => {
                    console.log('上传成功')
                })
            })
        }
    }, [])

    return <div ref={ containerRef }></div>
}

export default SignComponent

html

• 使用 ic-signature-component 组件

<ic-signature-component id="icSignComponent" company="xxx公司" party-name="张三" placeholder="签名" confirm-str="请确认123"  tips="xxx" submit-button-text="提交" clean-button-text="清除重签"></ic-signature-component>

<!-- 隐藏确认框：使用 hidden-confirm -->
<ic-signature-component id="icSignComponent" company="xxx公司" party-name="张三" placeholder="请签名"  tips="xxx" hidden-confirm submit-button-text="提交" clean-button-text="清除重签"></ic-signature-component>
<!-- 导入 umd 脚本注册组件 -->
<script src="icinfo-electronic-signature/dist/index.umd.js"></script>

<!-- 获取签名内容 -->
<script>
    window.onload = () => {
        document.getElementById('icSignComponent').addEventListener('save', (value) => {
            /* 通过 detail 拿到组件内容 */
            console.log(value.detail)
        })
    }
</script>

• 使用 hooks useSignature 创建组件

<!-- 定义组件容器 -->
<div id="container"></div>
<!-- 使用 hooks 创建组件 -->
<script type="module">
    const data ={
        /* 公司名称 */
        company: 'xxx1公司',
        /* 当事人名称 */
        partyName: '张三',
        /* 占位文本 */
        placeholder: '请签名',
        /* 确认文本 */
        confirmStr: '我同意xxx的协议',
        /* 是否自动销毁组件 */
        isAutoDestroy: false,
        /* 提示文本 */
        tips: '',
        /* 是否需要确认勾选框 */
        hiddenConfirm: false,
        /* 提交按钮文本 */
        submitButtonText: '提交',
        /* 清除按钮文本 */
        cleanButtonText: '清除重签',
    }

    const { useSubmit } = useSignature('#container', data)

    useSubmit(res => {
        const img = document.createElement('img')
        img.src = res
        document.body.appendChild(img)
        console.log(res)
    })

    /* 支持动态更改 */
    setTimeout(() => {
        data.tips = '这是新的提示'
    }, 2000)
</script>

api

type IUseSignatureReturn = {
    /* 销毁监听 */
    useDestroy: () => void,
    /* 手动更新组件的属性。注意：此手动更新不会更改 config */
    useUpdate: <T extends keyof IUseSignatureConfig>(key: T, value: IUseSignatureConfig<T>) => void,
    /* 保存的回掉 */
    useSubmit: (callback: (value: string) => void) => void
}

declare interface IUseSignatureConfig {
    /* 当事人名称 */
    partyName?: string
    /* 公司名称 */
    company?: string
    /* 占位文本 */
    placeholder?: string
    /* 确认文本 */
    confirmStr?: string
    /* 是否自动销毁组件 */
    isAutoDestroy?: boolean
    /* 签字提示文本 */
    tips?: string
    /* 是否需要确认勾选框 */
    hiddenConfirm?: boolean
    /* 提交按钮文本 */
    submitButtonText?: string
    /* 清除按钮文本 */
    cleanButtonText?: string
}

/**
 * 创建一个签名组件
 * @param container 存放组件的容器
 * @param config { IUseSignatureConfig | string } 配置，如果传递的是字符串，默认就是当事人名称
 * @returns { IUseSignatureReturn }
 */
type IUseSignature = (container: HTMLElement | string, config: IUseSignatureConfig | string) => IUseSignatureReturn