纯前端 PDF 数字签名实战：Vue 3 + pdf-lib 在浏览器里完成签名嵌入

最近给 PDF 工具箱加了签名功能，支持手写签名和文字签名两种模式。整个流程都在浏览器里完成，文件不上传服务器。这篇文章记录一下实现思路。

为什么坚持纯前端

签名这件事比较敏感。合同、发票、审批单这些文件，很多用户不愿意上传到第三方服务器处理。纯前端方案的好处：

文件不离开用户设备
签名图片不经过服务端
没有后端带宽和存储成本
加载完成后可以离线使用

代价就是所有 PDF 操作都要靠浏览器里的库完成。

技术栈

Vue 3 + Composition API
HTML5 Canvas：手写签名和文字签名渲染
pdf-lib：PDF 加载、图片嵌入、文件保存
Google Fonts：签名风格字体

两种签名输入

手写签名

核心是一个支持鼠标和触摸事件的 Canvas：

ini 复制代码

<canvas
  @mousedown="start"
  @mousemove="draw"
  @mouseup="stop"
  @touchstart.prevent="start"
  @touchmove.prevent="draw"
  @touchend="stop"
/>

需要注意 devicePixelRatio，不然在高分辨率手机上签名会糊。

文字签名

用 Canvas 渲染用户输入的名字，选择一种手写字体：

ini 复制代码

ctx.font = 'bold 48px "Great Vibes"'
ctx.fillStyle = color
ctx.fillText(name, x, y)

嵌入签名到 PDF

不管是手写还是文字，最终都导出成 PNG，再用 pdf-lib 嵌入：

ini 复制代码

const pdfDoc = await PDFDocument.load(pdfBytes)
const page = pdfDoc.getPages()[pageIndex]
const embedded = await pdfDoc.embedPng(signaturePng)

page.drawImage(embedded, {
  x,
  y,
  width,
  height,
  rotate: degrees(rotation)
})

const signedBytes = await pdfDoc.save()

坐标转换

预览 Canvas 是左上角坐标系，PDF 页面是左下角坐标系，而且预览通常有缩放。需要做一次映射：

javascript 复制代码

function previewToPdf(x, y, previewWidth, previewHeight, pdfWidth, pdfHeight) {
  const scale = pdfWidth / previewWidth
  return {
    x: x * scale,
    y: (previewHeight - y) * scale
  }
}

实际效果

支持 90° / 180° / 270° 旋转签名
支持拖拽、缩放调整位置
整个 PDF 在浏览器本地生成

适合场景：电子合同、报销单、审批表、租房协议等不需要证书级签名的日常文件。

局限

这种签名属于图像级签名，不是数字证书签名。如果需要法律效力更强的证书签名、签名时间戳、审计追踪，还是得用桌面 PDF 编辑器。

但日常办公场景下，图像签名已经能解决 80% 的问题，而且完全免费、不上传。

工具地址：sotool.top/sign-pdf

如果对你有帮助，欢迎点赞收藏，有问题评论区见。