我的 PDF 工具箱：CodeBuddy 打造 PDFMagician 的全过程记录

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

最近，我萌生了一个念头：能不能自己动手做一个功能丰富的 PDF 工具箱？市面上的 PDF 工具种类繁多，有些是网页版，有些需要下载安装，但真正体验下来，不是功能有限，就是广告太多。所以我向 CodeBuddy 发出了一个简洁明了的 Prompt：

“我要用 Vue3 + pdf-lib 打造一个多功能 PDF 工具箱 PDFMagician，支持：拖拽上传多个 PDF 或图片，操作选项（合并、拆分、压缩、图片转 PDF），操作完成后可在线预览与下载，UI 风格以玻璃拟态 + 神秘紫为主色调，支持动效过渡与任务进度反馈，支持批量文件拖放、文件大小展示、格式校验。请帮我完成相应功能。”

没想到，这一串需求并没有把 CodeBuddy 吓住，它居然立刻开始了任务拆解与技术分析。

🛠️ 项目从零搭建：一切从 Vite 开始

CodeBuddy 直接判断当前目录为空，于是它选择使用 Vite 创建 Vue3 项目。我没说用 JavaScript 还是 TypeScript，它主动为我选择了 JavaScript 版本，适合快速迭代开发。整个初始化过程干净利落，完成之后它就立刻进入了下一步 —— 安装依赖。

在这里插入图片描述

它安装了 pdf-lib 作为 PDF 操作的核心库，同时引入了 file-saver 来处理文件的下载功能。我没有多嘴，它却自动判断还需要一些辅助库，并在后续开发中逐步补齐。

📁 项目结构初始化：一步步搭建地基

接着，CodeBuddy 为我构建了基本的目录结构：

src/components/ —— 放 Vue 组件
src/utils/ —— 存工具函数
src/assets/ —— 放静态资源

然后，它创建了两个关键文件：

FileUploader.vue：负责处理拖拽上传功能
pdfOperations.js：处理 PDF 的合并、拆分等操作逻辑

我注意到，这些操作它甚至会根据我电脑用的是 PowerShell 而非 Bash，自动调整命令格式，避免报错。这种贴心程度真的让我有些佩服。

🧩 拖拽上传功能：用户交互第一步

在上传模块的实现中，CodeBuddy 采用了 dragenter, dragover, drop 等原生事件封装为 Vue 组件，让整个拖拽区域既优雅又可控。它还考虑了文件类型限制和大小展示，不止是上传，还能即时反馈用户是否上传了错误类型的文件。

这一块代码尤其值得一提的是，它将文件列表用 ref([]) 来管理，并且每一次 drop 都会判断是否是 PDF 或图片，防止用户误操作。数据绑定和校验做得相当扎实。

在这里插入图片描述

🧪 PDF 操作核心：pdf-lib 的精妙使用

当我还在想“PDF 合并怎么写”时，CodeBuddy 已经在 pdfOperations.js 中定义好了合并函数。使用 PDFDocument 对多个 PDF 进行加载，然后通过 copyPages 方法合并进新的文档，再使用 saveAs 下载，整个过程不需要后端参与，纯前端搞定。

分割、压缩甚至“图片转 PDF”的功能也逐步补齐，每一个功能都采用了 async/await 保证异步处理的稳定性，而且代码风格保持一致，非常易于扩展。

在这里插入图片描述