用了Trae CN，原来实现从PDF提取页面如此简单

当我们收到一个整个的 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 帮忙优化下。

主要修改点：

1. 使用 lazy 动态导入 react-pdf 相关组件
2. 添加 Suspense 提供加载中的回退UI
3. 将PDF worker初始化移到 useEffect 中，仅在文件上传后执行
4. 保留了所有原有功能，只是改变了加载方式

这样修改后：

• 初始加载时不会包含 react-pdf 的代码
• 只有在上传PDF文件后才会加载相关库
• 加载过程中会显示"加载PDF查看器..."提示
• 保持了原有的功能和用户体验

8. 多语言

由于最初设计的网页是支持中、英双语的，所以让 AI 帮忙实现多语言， 不管是组件内的文案替换，还是多语言代码的生成都是比较准确的，偶尔错漏的，稍微提示一下，就可以正常替换了。

总结

AI 编程确实可以对我们实现功能，提供很大的助力，但是我们也需要注意使用的方式方法。

特别是对于你不熟悉的类库，强大的 AI 让你无需关系 api 的细枝末节，只需要你了解正确的组合逻辑即可。比如 pdf.js 学习的曲线其实还蛮陡峭的。

另外，相比于传统的我一直在使用的通义灵码问答功能（非AI程序员），Trae 的 existing code 功能还是让我眼前一亮。

我一直非常纠结，AI 在大规模代码面前的，每次都要输出全量代码，虽然说现在不收费吧，一个是浪费他们自己的 token ，第二是浪费开发者的时间，而且 AI 在输出中的时候，复制粘贴都不太好用，这是现在 AI 的通病。Trae 的 existing code 大大节省了输出时间，这一点还是很优秀的。

感谢您可以阅读到这里，如果觉得对您有帮助，请给我一个小星星✨，如果有任何需要探讨的问题，欢迎评论区评论。

原文：https://juejin.cn/post/7491093307209924660