一、需求背景与技术可行性分析

在电子合同、在线报销等场景中，用户签名与发票生成的数字化需求日益增长。传统纸质签名流程存在效率低、易丢失等问题，而前端H5技术可通过Canvas/SVG实现手写签名，结合PDF生成库完成电子发票的自动化生成。

技术可行性方面，现代浏览器已全面支持Canvas API与触摸事件，移动端触屏设备可精准捕捉用户笔迹。PDF生成可通过jsPDF、pdf-lib等开源库实现，这些库支持在PDF中嵌入Base64编码的图像数据，为签名嵌入提供了技术基础。

二、用户签名实现方案

1. 签名组件设计

采用Canvas作为绘图区域，通过监听touchstart、touchmove、touchend事件实现笔迹追踪。核心代码示例：

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
canvas.addEventListener('touchstart', (e) => {
  isDrawing = true;
  const touch = e.touches[0];
  ctx.beginPath();
  ctx.moveTo(touch.clientX - canvas.offsetLeft, 
            touch.clientY - canvas.offsetTop);
});
canvas.addEventListener('touchmove', (e) => {
  if (!isDrawing) return;
  const touch = e.touches[0];
  ctx.lineTo(touch.clientX - canvas.offsetLeft, 
            touch.clientY - canvas.offsetTop);
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  ctx.stroke();
});
canvas.addEventListener('touchend', () => isDrawing = false);

2. 签名优化处理

• 抗锯齿处理：通过ctx.imageSmoothingEnabled = true优化笔迹边缘
• 压力感应模拟：根据触摸面积动态调整线宽（需设备支持）
• 清空功能：提供一键重置按钮，调用ctx.clearRect(0, 0, canvas.width, canvas.height)

3. 签名数据提取

将Canvas内容转换为Base64图像：

function getSignatureBase64() {
  return canvas.toDataURL('image/png');
}

三、PDF发票生成技术

1. 模板设计策略

采用分层设计思想：

• 静态层：使用PDF库预先生成发票背景（公司LOGO、表格线等）
• 动态层：通过pdf-lib的drawImage()方法嵌入签名

2. 动态内容填充

使用pdf-lib库示例：

import { PDFDocument, rgb } from 'pdf-lib';
async function generateInvoice(signatureBase64) {
  const existingPdfBytes = await fetch('template.pdf').then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];
  // 嵌入签名（假设签名区域在(100, 300)位置，宽200px）
  const signatureImage = await pdfDoc.embedPng(
    Buffer.from(signatureBase64.replace(/^data:image\/\w+;base64,/, ''), 'base64')
  );
  firstPage.drawImage(signatureImage, {
    x: 100,
    y: 300,
    width: 200,
    height: 80,
  });
  // 添加文本内容
  firstPage.drawText('发票编号：INV20230001', {
    x: 50,
    y: 700,
    size: 12,
    color: rgb(0, 0, 0),
  });
  const pdfBytes = await pdfDoc.save();
  return pdfBytes;
}

3. 跨平台兼容处理

• 移动端适配：通过CSS媒体查询调整Canvas尺寸
• PDF阅读器兼容：测试Acrobat Reader、Chrome内置查看器等主流工具的显示效果
• 字体嵌入：使用pdf-lib的embedStandardFont()确保中文字符显示

四、完整流程整合

1. 前端交互流程

1. 用户打开H5页面，系统加载发票模板
2. 用户在Canvas区域签名，点击”确认”按钮
3. 签名图像转换为Base64并上传至后端（或直接在前端生成PDF）
4. 系统生成带签名的PDF并提供下载

2. 性能优化方案

• Canvas缩放：在高DPI设备上使用window.devicePixelRatio进行像素适配
• PDF分块加载：对于复杂模板，采用异步加载方式
• Web Worker：将PDF生成过程放入Web Worker避免UI阻塞

3. 安全考虑

• 签名验证：在生成PDF前校验签名图像是否为空
• 数据加密：传输过程使用HTTPS，敏感数据可添加时间戳水印
• 防篡改机制：在PDF中嵌入数字签名（需后端配合）

五、典型应用场景

1. 电子合同签署：结合OCR识别实现合同条款自动填充
2. 在线报销系统：与财务系统对接自动生成标准发票
3. 医疗处方系统：医生手写签名后生成合规电子处方

六、开发实践建议

1. 渐进式增强：优先保证基础功能，再逐步添加压力感应等高级特性
2. 真实设备测试：在iOS/Android不同版本上进行触摸精度测试
3. 备选方案：对于不支持Canvas的老旧设备，提供上传签名图片功能
4. 用户体验优化：添加笔迹颜色选择、撤销重做等交互功能

通过上述技术方案，开发者可在纯前端环境中实现完整的签名-PDF生成流程。实际开发中建议先完成核心功能，再通过AB测试优化交互细节，最终构建出既符合业务需求又具备良好用户体验的数字化签名解决方案。