前端H5实现用户签名并生成PDF发票的技术方案

一、技术背景与需求分析

在电子发票、合同签署等业务场景中，用户签名是法律效力的核心要素。传统方案依赖后端生成签名位图或调用第三方API，存在响应延迟、数据安全风险等问题。前端H5方案通过Canvas直接捕获用户笔迹，结合PDF生成库实现签名嵌入，具有实时性强、数据可控的优势。

1.1 核心需求拆解

• 签名采集：支持触摸屏/鼠标的连续轨迹绘制
• 签名验证：确保笔迹非程序生成（可选）
• PDF生成：包含发票模板与签名图层的复合文档
• 兼容性：覆盖主流移动端浏览器（Chrome/Safari/微信内置浏览器）

二、技术实现路径

2.1 签名采集模块实现

2.1.1 Canvas绘制引擎

<canvas id="signatureCanvas" width="300" height="150"></canvas>

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// 触摸事件处理
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', stopDrawing);
// 鼠标事件兼容
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = getPosition(e);
}
function draw(e) {
  if (!isDrawing) return;
  const [currentX, currentY] = getPosition(e);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(currentX, currentY);
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.stroke();
  [lastX, lastY] = [currentX, currentY];
}
function getPosition(e) {
  const rect = canvas.getBoundingClientRect();
  const clientX = e.type.includes('touch') ? 
    e.touches[0].clientX : e.clientX;
  const clientY = e.type.includes('touch') ? 
    e.touches[0].clientY : e.clientY;
  return [clientX - rect.left, clientY - rect.top];
}

2.1.2 签名优化技术

• 防抖处理：限制高频触发导致的性能问题
• 笔迹平滑：通过贝塞尔曲线优化轨迹
• 数据压缩：将Canvas转为Base64时使用WebP格式（支持浏览器）

2.2 PDF生成方案

2.2.1 jsPDF核心实现

import { jsPDF } from 'jspdf';
function generatePDFWithSignature(signatureBase64) {
  const doc = new jsPDF({
    orientation: 'p',
    unit: 'mm',
    format: [210, 297] // A4尺寸
  });
  // 添加发票模板内容
  doc.setFontSize(16);
  doc.text('电子发票', 105, 30, { align: 'center' });
  doc.setFontSize(10);
  doc.text('发票编号：INV20230001', 20, 40);
  doc.text('日期：2023-11-15', 20, 50);
  // 添加签名（假设签名区域在右下角）
  const imgProps = doc.getImageProperties(signatureBase64);
  const aspectRatio = imgProps.width / imgProps.height;
  const targetWidth = 80;
  const targetHeight = targetWidth / aspectRatio;
  doc.addImage(
    signatureBase64, 
    'PNG', 
    150, // x坐标（右侧留白30mm）
    250, // y坐标（底部留白47mm）
    targetWidth, 
    targetHeight
  );
  return doc.output('blob');
}

2.2.2 PDF模板优化

• 分层设计：将背景表格、文字内容、签名区域分离
• 动态字段：通过模板引擎（如Handlebars）注入变量数据
• 样式控制：使用jsPDF的setTextColor、setDrawColor等方法增强可读性

2.3 完整流程集成

async function handleSubmit() {
  // 1. 获取签名数据
  const signatureCanvas = document.getElementById('signatureCanvas');
  const signatureBase64 = signatureCanvas.toDataURL('image/png');
  // 2. 生成PDF
  const pdfBlob = generatePDFWithSignature(signatureBase64);
  // 3. 预览与下载
  const pdfUrl = URL.createObjectURL(pdfBlob);
  window.open(pdfUrl, '_blank'); // 新标签页预览
  // 可选：上传至服务器
  const formData = new FormData();
  formData.append('pdf', pdfBlob, 'invoice.pdf');
  await fetch('/api/upload-invoice', { method: 'POST', body: formData });
}

三、关键问题解决方案

3.1 移动端适配

• 触摸事件处理：需同时监听touchstart/touchmove/touchend

• 画布尺寸：根据设备像素比（window.devicePixelRatio）动态调整

  function initCanvas() {
  const canvas = document.getElementById('signatureCanvas');
  const ctx = canvas.getContext('2d');
  const dpr = window.devicePixelRatio || 1;
  // 设置实际显示尺寸
  canvas.style.width = '300px';
  canvas.style.height = '150px';
  // 设置画布实际像素尺寸
  const rect = canvas.getBoundingClientRect();
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  // 缩放上下文
  ctx.scale(dpr, dpr);
  }

3.2 签名防伪

• 时间戳：在PDF元数据中嵌入签名时间
• 笔迹分析：通过压力数据（需设备支持）或绘制速度检测机械签名
• 哈希校验：将签名数据与用户ID生成唯一哈希值

3.3 性能优化

• Web Worker：将PDF生成过程放在后台线程
• 分步渲染：先显示签名预览，再后台生成PDF
• 缓存策略：对重复使用的发票模板进行缓存

四、扩展功能建议

1. 多签名支持：在PDF中预留多个签名区域
2. 印章集成：结合SVG实现电子印章功能
3. OCR识别：通过Tesseract.js实现发票内容自动填充
4. 区块链存证：将签名哈希上链增强法律效力

五、部署注意事项

1. 跨域问题：若使用CDN引入jsPDF，需配置CORS
2. iOS兼容：Safari对Blob URL的处理需额外测试
3. 文件大小：控制PDF分辨率（建议150dpi足够打印）
4. 回退方案：提供”重签”按钮和清除画布功能

六、总结与展望

本方案通过Canvas+jsPDF的纯前端实现，在保证安全性的同时提供了流畅的用户体验。随着WebAssembly的发展，未来可集成更复杂的签名验证算法（如基于机器学习的笔迹鉴定）。对于高安全要求的场景，建议采用前端生成签名位图+后端验证的混合模式。

实际开发中，推荐使用TypeScript增强代码健壮性，并通过Puppeteer等工具实现服务端渲染的备用方案。完整示例代码已上传至GitHub，包含React/Vue/原生JS三种实现版本，开发者可根据项目需求选择适配。