H5基于canvas实现电子签名并生成PDF文档

前言

电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名，其作用类似于纸质合同上的手写签名或加盖的公章。虽然电子签名多年来合法性一直遭到质疑，但其在企业工作流审批、请柬、单据保全等场景应用广泛，最近的项目中就有这样一个手写签名并生成PDF文件的需求。

实现思路

• 1. 使用canvas来实现手写签名的功能，然后将canvas转化为图片，贴在签名的位置；
• 1. 将整个需要生成文档的dom区域使用html2canvas插件转成一张大图；
• 1. 使用JsPDF插件将上述图片生成PDF文档；
• 1. 对于文件内容较多的情况，需要合理选择分页位置；

生成签名

1. 在tsx中定义canvas画布

 <canvas className={styles.canvas} ref={canvasDom} width="350" height="150" />
复制代码

注意：Canvas的宽高必须要使用内联样式定义，这是因为Canvas标签有自己的默认宽高300px×150px。它内联样式定义的width和height是绘画区域（画布）实际宽度和高度，绘制的图形都是在这个上面。如果在style外链文件中定义其width和height，那么这个width和height是Canvas在浏览器中被渲染的高度和宽度。如果Canvas中没有直接定义width和height没或值不正确，就会被设置成默认值{width:300px，height:150px}。所以，如果你在style中外链文件中设置了canvas {width: 200px; height: 200px;}，却没有直接在canvas上定义画布宽高，那么此时你输出canvas.height 值依旧为150，canvas.width值依旧为300。也就是一块150×300的画布在200×200的区域渲染，因而图片会出现拉伸、变形等现象。

2. 定义签名函数

 const writing = (
    beginX: number,
    beginY: number,
    stopX: number,
    stopY: number,
    ctx: any,
  ) => {
    ctx.beginPath();  // 开启一条新路径
    ctx.globalAlpha = 1;  // 设置图片的透明度
    ctx.lineWidth = 3;  // 设置线宽
    ctx.strokeStyle &#