如何使用JavaScript构建浏览器端PDF水印工具

PDF水印常用于品牌标识、文档保护、审批、机密文件以及内部文档追踪。无论是添加公司徽标、"CONFIDENTIAL"标签，还是草稿水印，用户通常需要一种无需将文件上传到外部服务器即可快速修改PDF的方法。

现代浏览器让这一过程比以往更简单。我们无需将文档发送到后端，而是可以直接在浏览器中使用JavaScript处理PDF文件。这种方式既保护了文档隐私，又使工具运行得更快、更便捷。

在本教程中，你将构建一个基于浏览器的PDF水印工具，使用JavaScript实现。

该工具支持文本和图像水印，可调节透明度、旋转角度、页面选择、位置控制，并能直接从浏览器导出最终PDF文件。

所有操作完全在客户端完成，无需任何后端支持。

目录

1. PDF水印的工作原理
2. 项目搭建
3. 我们使用什么库？
4. 创建上传界面
5. 添加文本水印
6. 添加图像水印
7. 位置与透明度控制
8. 选择应用页面
9. 生成并下载最终PDF
10. 演示：PDF水印工具的工作原理
11. 实际使用中的注意事项
12. 需避免的常见错误
13. 总结

PDF水印的工作原理

PDF水印是叠加在现有PDF页面上的额外文本或图像层。在浏览器中，JavaScript库可以加载PDF页面，进行视觉修改，并导出可下载的新版本。

流程始于用户将PDF文件上传到工具。JavaScript会读取文档，加载每一页，并在现有内容上叠加水印元素（如文本或徽标）。应用位置和透明度设置后，更新后的PDF会在浏览器中直接生成并下载。

所有操作完全在浏览器本地完成。这意味着上传的文档不会离开用户设备，从而提升隐私和安全性。

项目搭建

本项目设计简洁。所有功能直接在浏览器中通过JavaScript运行，无需后端服务器。

所需材料：

• 一个HTML文件
• 一个JavaScript文件
• 一个PDF处理库

我们使用什么库？

我们将使用PDF-lib库在浏览器中编辑现有PDF文档。

通过CDN引入：

<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

该库允许我们直接在浏览器中加载PDF文件，修改现有页面，插入自定义文本或图像水印，并最终导出更新后的文档为可下载的PDF文件。由于所有操作在客户端完成，用户无需将文件上传到服务器即可编辑PDF。

如何创建上传界面

从基础上传输入框开始：

<input type="file" id="pdfUpload" accept="application/pdf">
<button onclick="addWatermark()">
  应用水印
</button>

这允许用户直接从浏览器上传PDF文件。

工具还包括水印设置面板，包含文本输入、图像上传、透明度控制、位置调整和页面选择等功能。以下是工具中水印设置面板的示例：

如何添加文本水印

文本水印常用于"CONFIDENTIAL"、"DRAFT"或"APPROVED"等标签。例如：

page.drawText("CONFIDENTIAL", {
  x: 200,
  y: 300,
  size: 48,
  opacity: 0.5
});

这会将水印文本直接添加到PDF页面上。用户还可通过工具直接自定义水印外观。

对于文本水印，用户可调整字体大小、更改文本颜色、应用加粗或斜体样式、控制透明度级别，并以不同角度旋转水印，以增强可视性和保护效果。

如何添加图像水印

有些用户可能希望使用徽标或品牌图形而非纯文本。

例如：

const image = await pdfDoc.embedPng(imageBytes);

page.drawImage(image, {
  x: 180,
  y: 250,
  width: 120,
  height: 120,
  opacity: 0.5
});

这会在PDF页面上添加图像水印。

该工具还支持图像缩放控制，允许用户在应用前调整上传的徽标尺寸。

这是工具内图像水印设置的示例：

定位与不透明度控制

水印位置对可读性和文档外观至关重要。

用户可能需要居中水印、角落定位或根据文档类型设置对角覆盖。

例如：

page.drawText("CONFIDENTIAL", {
  x: 220,
  y: 250,
  rotate: degrees(45),
  opacity: 0.5
});

这会生成一个倾斜的半透明水印。

工具允许用户直接在浏览器中调整水印的位置和外观。

用户可控制X/Y坐标、调整不透明度、旋转角度，并通过方向定位控件快速移动水印。

这使得无需外部软件手动编辑PDF即可精准放置水印。

这是工具内定位控件的示例：

如何选择应用水印的页面

并非所有水印都需要出现在每一页。有些用户可能仅需特定页面应用水印。

例如：

const selectedPages = [1, 3, 5];

该工具允许用户精确控制水印的显示位置。

例如，水印可应用于文档所有页面、偶数页、奇数页，或自定义页码范围如1-3,5。

这种灵活性适用于合同、发票、报告、证书等品牌文档的实际需求。

这是工具内页面选择选项的示例：

如何生成并下载最终PDF

配置完成后，浏览器会直接在客户端生成更新后的PDF文件。

例如：

const pdfBytes = await pdfDoc.save();

然后可下载更新后的文件：

download(pdfBytes, "watermarked.pdf");

此过程完全在浏览器端完成，无需上传文件到外部服务器。

演示：PDF水印工具的工作流程

以在浏览器中直接添加自定义水印为例：

步骤1：上传PDF文件

用户将PDF文档上传到水印工具。

步骤2：预览上传的PDF

上传完成后，工具会在浏览器中生成实时预览。

用户可通过左右箭头按钮逐页浏览文档，在添加水印前进行检查。

分页预览帮助用户确认文件正确性、检查页面内容，并确定水印位置。

这是工具内PDF预览部分的界面示例：

步骤3：配置水印设置

用户可在文本或图像水印模式间切换。

对于文本水印，可自定义字体大小、颜色、不透明度和旋转角度。

对于图像水印，可上传徽标并调整缩放比例后再应用。

步骤4：定位并应用水印

用户可在生成最终文件前直观调整水印位置。

工具允许用户控制水印在文档中的应用范围。例如，水印可显示在所有页面、偶数页、奇数页或自定义页码范围。

不透明度和旋转控件可优化可见性，避免遮挡文档重要内容。

这为合同、发票、报告、证书等文件的水印添加提供了更多灵活性。

步骤5：生成带水印的PDF

第 6 步：预览并下载更新后的 PDF

处理完成后，工具会实时预览最终带有水印的 PDF 文件。

用户可在下载前检查更新后的文档。界面还会显示总页数和最终文件大小等文件信息。

下载前还可对生成的 PDF 进行重命名。

以下是最终输出预览区域的示例：

实际使用中的注意事项

处理大型 PDF 文档时，性能和渲染速度至关重要。

逐页添加水印通常比同时修改所有页面更稳定。

例如：

for (const page of pdfDoc.getPages()) {  
  // 应用水印  
}  

另一个实用的优化方法是缩小嵌入大logo的水印图像尺寸。这可减少输出文件体积并提升处理速度。

透明度设置也很重要。过暗的水印会降低文档可读性，尤其在打印时。将透明度设置在 0.3 到 0.5 之间通常能取得较好的实际效果。

由于所有操作均在浏览器本地完成，上传的文档始终保持私密且不会离开用户设备。

需避免的常见错误

一个常见错误是将水印透明度设为全不透明（1）。这会大幅降低文档可读性。

例如：

opacity: 1  

应改用更低的透明度值：

opacity: 0.4  

另一个问题是水印定位错误。若硬编码的坐标不正确，水印可能超出可见页面范围。

动态定位方式在不同页面尺寸下表现更稳定。大型图像水印会显著增加 PDF 文件体积，建议在嵌入前先调整图像尺寸。

另一个常见疏漏是未验证上传文件：

if (!file || file.type !== "application/pdf") {  
  alert("请上传有效的 PDF 文件。");  
  return;  
}  

这可防止非 PDF 文件导致工具崩溃。

总结

在这篇教程中，你使用 JavaScript 构建了一个基于浏览器的 PDF 水印工具。

你学习了如何上传 PDF 文件、添加文本或图像水印、控制定位和透明度，以及直接在浏览器中生成可下载的 PDF 文件。

更重要的是，你看到了现代浏览器如何在无需后端服务器的情况下本地处理文档编辑任务。这种方案使工具保持快速、私密且易于使用。

你可在此处尝试实时工具：All In One Tools PDF 水印工具

掌握这一工作流后，可进一步扩展功能，例如添加数字签名、PDF 注释、图章工具、密码保护或高级文档编辑功能。

这才是真正令人兴奋的开始。

• * *

• * *

免费学习编程。freeCodeCamp 的开源课程已帮助超过 40,000 人获得开发岗位。开始学习