当我们收到一个整个的 PDF，只想要其中几页，怎么办呢？
传统的方式，我们使用 i Love PDF 的 Split PDF 把文档拆开来，再使用 Merge PDF 把文档又合并起来。但是这样一来我们得上传文件到 i Love PDF 服务器，虽然看似是安全的，2小时自动或者手动可以立即删除，但是还是会有顾虑。二来步骤繁琐，明明一次就能搞定，为什么要这么麻烦。
基于这个需求，我使用 Trae CN 开发了一款工具可以让您便捷的体验这个功能，你可在我的官网进行体验，功能是纯前端的，您无需担心 pdf 被泄露。以下是我们如何使用 Trae CN 实现这个功能的心得体会。
如何使用 Trae CN 实现一个 PDF 自由组合工具
功能基于 Trae CN + pdfjs + react-pdf + pdf-lib 实现。完整代码可参看github
1. 拆分组件
首先我这边的基础是在主页面代码中有一个div，渲染了如下内容
Trae 当然可以轻松的主页面完成对功能的改造，但是存在如下问题：
- 耗时增多，因为要阅读很多无效内容
- 对于开发人员也有很大的心智负担
所以第一步，我们需要指挥 Trae 把这个组件拆出去。如下图所示，Trae 会在合适的文件目录里新建一个 PdfCombinerCard.tsx
以此为基础，我们可以功能开发。
2. 上传文件
第二步，我们需要点击按钮后能上传文件，并有一定的交互感。给 Trae 提供如上图指令后，他就可以轻松的实现该效果。
3. 预览PDF
接下来我们指挥 Trae ，增加一个预览 PDF 的功能
其实此时 AI 犯了一些错误，因为毕竟我们是非常的粗略的描述需求的
- AI将每一个需要的展示的PDF都用
react-pdf的Document来展示，导致电脑发烫 - AI未能有效的理解当前的页面状态，所以宽高可能会不合适，需要自行调整
- AI把 Loading 状态和 PDF 预览互斥展示了，导致无法触发 PDF 的加载成功事件，从而取消 Loading 状态
这些经过反复对话和手动调整（简单的自己调整会快很多，毕竟ai思考小问题的速度要远慢于经验丰富的你）
4. 完善功能区
预览功能完成后，我们需要增加一些按钮，来完成我们的功能，AI 在这一步完成的很出色。
5. 完成选取PDF功能
因为左键需要用来选取缩略图，所以使用右键（移动端长按）来实现添加/移除到自由组合序列中的功能。
如上图，左侧第一次描述后，AI 忽略了交互性，直接使用右键，第一次点是选中，再点是取消，这个不太符合人的习惯，所以再强调下，就可以完成这个功能啦。
有点惊喜的是，AI还把自由组合按钮的状态给根据是否有选中的页面调整了，这个就算是人工来写，也不一定第一下就能给加上。
6. 下载合成的PDF
这一步 AI 完成的很好，包括引入 pdflib 库，和生成下载方法，可能他学习了大量的这种代码，输出的质量非常高。
7. 优化代码
因为我是个单页工具网页，如果所有工具网页的库一次性都加载，需要耗费更多的流量，也会带来更长的加载时间，所以让 AI 帮忙优化下。
主要修改点：
- 使用 lazy 动态导入 react-pdf 相关组件
- 添加 Suspense 提供加载中的回退UI
- 将PDF worker初始化移到 useEffect 中，仅在文件上传后执行
- 保留了所有原有功能，只是改变了加载方式
这样修改后：
- 初始加载时不会包含 react-pdf 的代码
- 只有在上传PDF文件后才会加载相关库
- 加载过程中会显示"加载PDF查看器..."提示
- 保持了原有的功能和用户体验
8. 多语言
由于最初设计的网页是支持中、英双语的，所以让 AI 帮忙实现多语言， 不管是组件内的文案替换，还是多语言代码的生成都是比较准确的，偶尔错漏的，稍微提示一下，就可以正常替换了。
总结
AI 编程确实可以对我们实现功能，提供很大的助力，但是我们也需要注意使用的方式方法。
特别是对于你不熟悉的类库，强大的 AI 让你无需关系 api 的细枝末节，只需要你了解正确的组合逻辑即可。比如 pdf.js 学习的曲线其实还蛮陡峭的。
另外，相比于传统的我一直在使用的通义灵码问答功能（非AI程序员），Trae 的 existing code 功能还是让我眼前一亮。
我一直非常纠结，AI 在大规模代码面前的，每次都要输出全量代码，虽然说现在不收费吧，一个是浪费他们自己的 token ，第二是浪费开发者的时间，而且 AI 在输出中的时候，复制粘贴都不太好用，这是现在 AI 的通病。Trae 的 existing code 大大节省了输出时间，这一点还是很优秀的。
感谢您可以阅读到这里，如果觉得对您有帮助，请给我一个小星星✨，如果有任何需要探讨的问题，欢迎评论区评论。
如果您对我司过往的产品感兴趣，可以移步查看，感谢您的支持！
2025.04.02 - ant design pro 模版简化工具, MIT已开源
我们是微谏科技，努力打造一家属于自己的小而美的公司，下期再见。