北京
你或许以为处理PDF必须依赖后端服务或专业软件，但本文要告诉你一个反常识的事实——只用浏览器和几行JavaScript，就能构建一个完整的PDF文档脱敏工具，且所有操作都在本地完成，敏感文件绝不会离开你的电脑。我们将借助PDF.js渲染页面，再配合PDF-lib实现精准的矩形遮盖，最终生成一份彻底“洗白”的PDF。整个过程只需5个核心步骤，还会深入解析坐标转换这一最易踩坑的关键点，让你避开90%开发者都会犯的错误。 第一步：搭建文件上传与预览环境。使用FileReader读取用户选择的PDF，然后把ArrayBuffer传给PDF.js的getDocument方法。这里有一个容易忽视的性能陷阱：千万别一次性渲染全部页面，而是先获取总页数，再按需加载当前页。我们可以在Canvas上绘制页面，同时监听鼠标事件为后续的框选做准备。第二步：实现拖拽式矩形框选。这步看似简单，但需要注意在缩放或滚动后，鼠标坐标与PDF内部坐标系的映射关系。很多人直接用Canvas上的像素坐标去裁剪，结果位置全偏了。第三步：精确的坐标转换。这是整个工具的命门。视口变换矩阵会把PDF的72dpi坐标系映射到屏幕像素，你必须根据当前的缩放比例和偏移量反算出原始点。公式其实不复杂，但需要一遍遍验证。第四步：用PDF-lib施加“永久性遮蔽”。有了坐标列表后，通过PDF-lib加载原文件，遍历页面并在指定位置绘制纯黑或纯白矩形。这里要强调：不要使用注释或高亮层，那些可以被轻易删除，必须把矩形嵌入内容流里，才能做到真正不可逆的遮盖。第五步：触发下载。把修改后的PDF字节写入Blob，创建一个隐藏的a标签自动点击下载。完成后你会发现，整个应用没有任何网络请求，所有计算都跑在浏览器主线程或Web Worker里，连文件哈希都无需上传。 最终效果是：上传一份合同扫描件，框选身份证号区域，点击“应用遮盖并下载”，得到的PDF里那些敏感信息就被彻底抹除了。如果想让工具更强大，还可以加入图形标注、自由画笔，甚至通过jsPDF生成全新的脱敏页。当你掌握这种纯前端处理能力后，很多需要审批、脱敏、预审的场景就再也不用把原始文件传来传去了。现在打开你的代码编辑器，跟着思路试试看，一个上午就能跑通整个流程。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
