如何使用JavaScript构建基于浏览器的PDF签名工具
内容提要
本教程介绍如何用JavaScript构建浏览器端PDF签名工具。用户可上传PDF、预览页面，通过绘制、输入或上传图片创建签名，也可添加自定义文本或预设印章（如APPROVED、CONFIDENTIAL）。支持调整元素位置、缩放、旋转、透明度，并选择应用到当前页、所有页或指定页。最终生成新PDF供预览和下载。项目使用PDF.js渲染和PDF-lib修改文档，实现完整的客户端PDF编辑流程。
延伸解读
电子签名与数字签名的区别
本工具实现的是电子签名，即把绘制的、输入的或上传的签名图片以视觉形式嵌入PDF，类似手写签名。而数字签名基于证书和加密技术，可验证文档完整性和签名者身份。两者常被混用，但技术本质不同。本教程不涉及数字签名，若需法律效力的数字签名，需使用更高级的签名系统。
浏览器端处理的优势与局限
整个流程在浏览器完成，无需打印、扫描，简化了签署步骤。但需注意，PDF.js和PDF-lib均为客户端库，处理大文件或复杂PDF时可能性能受限。此外，生成的PDF仅包含视觉签名，不具备数字签名的防篡改功能。对于正式合同，建议结合合规的数字签名方案。
坐标转换与页面适配
预览时元素位置基于浏览器坐标，生成PDF时需转换为PDF坐标，且Y轴方向相反。教程提供了转换公式，但未处理页面尺寸不一致的情况。若PDF各页尺寸不同，同一坐标可能错位。实际应用中，应针对不同页面单独调整位置，或限制仅应用于相同尺寸的页面。
生产环境注意事项
教程使用CDN加载库，建议在生产中固定版本并测试。此外，拖拽边界处理仅基于元素原始尺寸，未考虑旋转和缩放后的实际边界，可能导致元素部分超出页面。对于更精确的边界检测，可使用getBoundingClientRect()。同时，签名图片建议使用透明PNG，避免白色背景遮挡文档内容。
Q&A
如何使用JavaScript构建一个基于浏览器的PDF签名工具？
本教程介绍了如何使用JavaScript构建一个基于浏览器的PDF签名工具。该工具允许用户上传PDF、预览页面、添加签名（通过绘制、输入或上传图片）以及添加文本或预设印章（如APPROVED、CONFIDENTIAL等）。用户还可以调整元素的位置、缩放、旋转、透明度，并选择应用到当前页、所有页或指定页。最终生成新的PDF供预览和下载。项目使用PDF.js进行渲染，使用PDF-lib进行文档修改。
电子签名和数字签名有什么区别？
电子签名是将手写签名、打字签名或上传的签名图像以可视方式放置在PDF页面上，类似于手写签名。数字签名则使用基于证书的加密方法来验证文档完整性和签名者身份，涉及数字证书、私钥、签名验证和信任链。本教程构建的工具实现的是电子签名，而不是数字签名。
PDF.js和PDF-lib在项目中分别承担什么角色？
PDF.js负责加载和渲染PDF页面，用于预览；PDF-lib负责修改PDF并生成最终文件。PDF.js将页面渲染到canvas上，PDF-lib则用于嵌入签名图像、绘制文本等操作。
如何实现PDF页面的上传和预览？
用户通过文件输入或拖放上传PDF文件。代码验证文件类型，读取为ArrayBuffer，使用PDF.js加载文档，并渲染第一页到canvas上。同时，页面导航按钮允许用户切换页面。
签名创建有哪几种方式？
签名创建有三种方式：绘制（在canvas上用手写笔或鼠标绘制）、输入（输入姓名并选择字体样式生成签名图像）、上传（上传已有的签名图片，如透明PNG）。
如何将签名或文本元素应用到PDF的指定页面？
用户可以选择将元素应用到当前页、所有页或指定页。指定页可以通过输入页码范围（如1, 3-5, 10）来实现。代码解析这些输入，生成目标页面数组，然后在生成最终PDF时，将元素绘制到这些页面上。
在生成最终PDF时，如何将浏览器中的元素坐标转换为PDF坐标？
需要计算缩放比例：scaleX = pdfWidth / pdfCanvas.width，scaleY = pdfHeight / pdfCanvas.height。然后转换坐标：pdfX = activeElement.x * scaleX，pdfY = pdfHeight - (activeElement.y + element.offsetHeight) * scaleY。这是因为浏览器坐标系原点在左上角，而PDF坐标系原点在左下角。
如何处理签名图像的透明度？
绘制签名时，canvas默认支持透明度，生成的PNG图像可以保留透明背景。上传签名时，建议使用透明PNG，这样只有签名笔画可见，不会出现矩形背景。在嵌入PDF时，PDF-lib的embedPng方法会保留图像的透明度。
