PDF文档通常被用于协议、表格、审批文件、发票、报告、申请等各类需要签名或添加额外文字后才可共享的文件。
传统的处理流程通常是先打印文件，手动签署后再次扫描，然后再发送新的文件。而对于简单的电子签名功能来说，这种流程会增加不必要的步骤。
在本教程中，您将使用JavaScript构建一个基于浏览器的PDF签名工具。用户可以上传PDF文件，预览并浏览其页面，并直接在文档中添加内容。
该工具主要支持两种元素类型：签名和文本/印章。
对于签名功能，用户可以直接在浏览器中绘制签名、输入自己的名字并选择签名样式，或者上传现有的签名图片。而对于文本元素，用户可以输入自定义文本，或使用预设的印章，如已批准、机密、草稿和已支付等。
创建好这些元素后，用户可以将它们放置在PDF预览页面上，并调整比例、旋转角度、不透明度、字体大小和颜色等属性。这些元素可以应用于当前页面、所有页面，或者特定的几页。
处理完成后，该工具会生成一个新的PDF文件供用户查看。用户可以预览结果，重新命名输出文件，查看文件的页数和大小，然后直接从浏览器中下载它。
该项目使用PDF.js来渲染文档内容，同时利用PDF-lib来修改和生成最终的PDF文件。
通过学习本教程，您将了解如何构建一个结合了基于画布的输入功能、图片嵌入、文本排版、坐标转换、页面选择以及客户端文件生成技术的交互式PDF编辑工具。
我们将会介绍以下内容：
这个PDF签名工具能做什么
该应用程序提供了一种统一的编辑流程，用于在PDF页面上添加签名、文本以及常见的文档印章。
当选择签名功能时，用户可以通过三种不同的方式来创建签名。
-
绘制选项提供了一个画布，用户可以使用鼠标、触控板、触控笔或触摸输入来书写签名。
-
输入文本选项可将用户输入的文字转换成签名格式。用户可以输入自己的名字，调整字体大小，并从预设的签名样式中选择合适的风格。
-
上传图片选项允许用户使用现有的签名图片。对于那些已经拥有手写签名的透明PNG图片或其他支持格式的图片的人来说，这个功能非常实用。
第二种可使用的元素类型是文本/印章。用户可以输入自定义文本，例如：
签名时间：2025年8月9日他们也可以快速选择预设的印章格式，例如：
已批准
机密
草稿
已支付创建好元素后，应用程序会提供相应的控件来调整其位置和外观。用户可以将元素移动到所需的位置，并调整其大小、旋转角度、不透明度以及位置。
文本和印章元素还可以使用可配置的字体大小和颜色。
页面设置决定了所选元素将会被应用在文档的哪个位置。例如，签名通常只出现在合同的最后一页，而机密印章则可能需要出现在每一页上。
因此，该应用程序支持以下几种应用方式：
仅当前页面
所有页面
特定页面我们的目标是为多种常见的PDF编辑任务提供统一的操作流程，而无需为每种元素类型单独使用不同的工具。
电子签名与数字签名
在开发这个应用程序之前，首先需要明确电子签名和数字签名之间的区别。
本教程中介绍的工具就是用于创建电子签名的。
无论是通过绘制、输入文本还是上传图片来生成签名，这些签名都会以可视化的形式被添加到PDF页面上。这类似于手工签署文件后，在文件中插入该签名的可视化表示。
例如，用户可以在画布上绘制签名：
const signatureImage =
signatureCanvas.toDataURL("image/png");
生成后的图片可以直接嵌入到PDF文件中。
而数字签名的工作原理则有所不同。
基于证书的数字签名会使用加密技术来验证文件的完整性以及与签名证书相关联的身份信息。这类签名通常涉及数字证书、私钥、签名验证机制以及信任链等概念。
仅仅将手写签名图像添加到PDF文件中，并不能生成那种具有加密验证功能的签名。
这种区别很重要，因为在日常对话中，尽管这些技术背后的实现原理不同，但人们有时会将这些术语混用。
我们正在开发的项目专注于视觉电子签名及文档元素，并不涉及基于证书的加密数字签名功能。
明确这种区别有助于人们准确理解该应用程序的具体功能，以及哪些情况需要使用更高级的签名系统。
基于浏览器的工作流程原理
整个流程始于用户选择一份PDF文件。
PDF.js会加载这份文档，并将其当前页面显示在浏览器的画布上。通过“上一页”和“下一页”按钮，用户可以浏览PDF文件的内容，然后再决定将某个元素放置在哪里。
随后，用户需要从两种元素类型中选择一种：
签名
文本/印章如果选择签名，应用程序会提供三种创建方法：
手绘签名
输入文本
上传签名图片选定的签名会被转换成一种可以在PDF预览页面上显示的元素。
如果选择文本/印章，应用程序会使用自定义内容或预设的印章图案来创建相应的文本元素。
整个工作流程如下：
上传PDF文件
↓
> 显示文档并浏览页面
↓
> 选择签名类型或文本/印章类型
↓> 创建相应元素
↓> 调整元素的位置和样式
↓> 选择要添加元素的页面位置
↓> 应用设置并完成最终处理
↓> 生成新的PDF文件
↓> 预览结果
↓> 重命名文件并下载在编辑过程中，显示在PDF预览页面上的元素实际上只是浏览器端的模拟显示。之后需要将这些元素的坐标转换为与实际PDF页面相匹配的值。
例如，应用程序可能会以如下方式存储这些元素的信息：
const element = {
type: "signature",
x: 622,
y: 496,
scale: 1.14,
rotation: 0,
opacity: 1
};
当用户点击“应用设置并完成最终处理”按钮时，这些参数会被用来计算元素在PDF文件中的最终位置。
这种将交互式预览功能与最终的PDF生成过程分开的设计，正是该项目得以实现的基础。这样的设计使用户可以先通过视觉方式调整文档内容，只有当所有元素的位置都确定后，才会生成最终的PDF文件。
项目设置
为了便于理解整个项目，我们将使用三个主要的文件：
pdf-signature-tool/
│
├── index.html
├── style.css
└── script.js
HTML文件中包含了文件上传界面、PDF预览功能、编辑工具、最终预览界面以及下载选项。
CSS文件负责处理布局和视觉效果的表现。
JavaScript文件则负责管理PDF文件的加载、页面渲染、签名生成、文本与印章元素的显示位置调整、最终PDF文件的生成以及下载操作。
<!DOCTYPE html>
<html lang="en">
<head>
PDF签名工具
PDF签名工具
请上传您的PDF文件，以便添加电子签名。
将PDF文件拖放到此处
或点击此处浏览文件