项目介绍
这是一个基于 Vue 2 的文件预览解决方案,支持主流办公文件的在线预览,包括 Word、Excel、PPT 和 PDF 文件。本项目采用 Vue 2 技术栈开发,确保了更好的兼容性和稳定性。
该项目目前已开源:github.com/xiaobox/fil…
项目开发说明
本项目是一个特殊的实验性项目,完全通过与 Cursor(AI 驱动的智能 IDE)的交互来完成。从项目初始化到最终完成,所有的代码都是通过与 Cursor AI 助手的对话生成的,没有手动编写任何一行代码。这个开发过程展示了 AI 辅助编程的潜力,以及如何利用先进的 AI 工具来加速开发流程。
主要特点:
- 零手写代码:所有代码均由 Cursor AI 生成
- 完整对话驱动:通过自然语言描述需求,AI 理解并实现功能
- 快速迭代:AI 能够根据反馈快速调整和优化代码
- 高质量输出:生成的代码遵循最佳实践,包含完整的错误处理和用户体验考虑
这种开发方式展示了 AI 在软件开发中的应用前景,以及如何利用 AI 工具来提高开发效率。
功能特性
- 支持文件类型:
- Word 文档 (.docx)
- Excel 表格 (.xlsx)
- PowerPoint 演示文稿 (.pptx)
- PDF 文档 (.pdf)
- 支持本地文件预览和远程 URL 文件预览
- 支持大文件分页加载
- 完整的跨平台支持:
- 完美适配 PC 端和移动端
- iOS(iPhone/iPad)和 Android 设备上表现优异
- 响应式设计,自适应不同屏幕尺寸
- 针对移动端优化了触控体验和性能
- 优雅的加载状态和错误处理
技术栈
- 核心框架:Vue 2.7.x(使用 Vue 2 的最新稳定版本)
- 路由管理:Vue Router 3.6.x(与 Vue 2 配套的路由版本)
- 文件预览:
- Word:@vue-office/docx
- Excel:@vue-office/excel
- PPT:@vue-office/pptx
- PDF:pdfjs-dist(Mozilla PDF.js)
- 开发工具:
-
Vue CLI
-
Babel
-
ESLint
-
技术方案说明
PDF 预览方案
本项目选择使用 Mozilla 的 PDF.js(pdfjs-dist)而不是 @vue-office/pdf 的原因:
-
功能完整性:
- PDF.js 是 Mozilla 维护的成熟方案,功能更加完整
- 支持文档大纲、缩放、搜索等高级功能
- 支持表单填写和注释
-
性能优势:
- 支持分页按需加载,减少内存占用
- 渲染性能更好,适合大型 PDF 文件
- 支持流式加载,无需等待整个文件下载完成
-
兼容性:
- 浏览器兼容性更好
- 支持更多 PDF 特性和格式
- 渲染效果更接近原生
-
社区支持:
- 有庞大的社区支持
- 问题修复和更新及时
- 文档完善,示例丰富
-
实践经验:
- 在测试中发现,使用 @vue-office/pdf 预览大型 PDF 文件时,在移动端存在严重问题
- 具体表现为:在文件未完全加载完成时,页面会自动多次重新加载
- 这可能是由移动设备内存限制或操作系统的内存管理机制导致
- 而使用 PDF.js 的分页渲染机制可以很好地解决这个问题
渲染实现说明
PDF.js 的渲染流程:
-
核心渲染过程:
const page = await pdfDoc.getPage(pageNumber) const viewport = page.getViewport({ scale: scale }) const canvas = document.getElementById(`pdf-page-${pageNumber}`) const context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width const renderContext = { canvasContext: context, viewport: viewport } await page.render(renderContext).promise
-
技术细节:
- 直接将 PDF 内容渲染到 Canvas,而不是转换成图片再加载
- 每个页面使用独立的 Canvas 元素
- 采用分页渲染机制,提升渲染性能
- 支持缩放、旋转等视图操作
-
性能优化:
- 实现分页渲染,避免一次性渲染所有页面
- 使用 Canvas 直接渲染,减少内存占用
- 支持流式加载,提升首屏加载速度
-
移动端适配:
- 针对移动端内存限制进行优化
- 避免了整个文件内容同时加载到内存的问题
- 解决了大型 PDF 在移动端反复重载的问题
旧版 Office 格式支持方案
如果需要支持旧版 Office 格式(.doc、.xls、.ppt),建议采用以下方案:
-
服务器转换方案:
- 使用 LibreOffice/OpenOffice 搭建文件转换服务
- 将旧版格式转换为新版格式后再预览
- 优点:可控性强,无需第三方服务
- 缺点:需要自行维护服务器
-
商业转换服务:
- 使用 Microsoft Office 365 API
- 使用金山 WPS 开放平台
- 优点:稳定性好,维护成本低
- 缺点:需要付费,依赖第三方服务
-
客户端转换:
- 提示用户使用 Office 或 WPS 另存为新版格式
- 优点:实现简单,无需额外服务
- 缺点:用户体验不够友好
最后
谈谈感受
最近团队在开发文件预览的功能,本来觉得是一个比较常规和普遍的功能就没多过问,后来前端同学反馈问题比较多,比如移动端的兼容问题、新旧 office 格式文件的兼容问题、pdf 大文件预览问题等等。于是参与想了几个方案,本文介绍的项目是一个纯前端 解决方案。整体来看占用的资源比较小,是一个性价比很高的方案。当然,这是在解决了刚才提到的那些问题的前提下。
这个项目从技术难度上并没有多高,但从过程和形式上却很有意思。
因为这是又一个我用 Cursor 在不手写任何一行代码的基础上完成的项目。
我本来预计半天的时间就能搞定,没想到整整搞了一天。
无论是在技术社区还是在社交媒体,经常看到有人说:自己不会写代码,用 Cursor 在自己不写一行代码的情况下,用很短的时间完成了一个 app 或者一个项目。
其实这样的项目,我已经写了好几个了,但区别是,我是一名具有 15 年研发经验的工程师。
从我的角度来说,我觉得:在自己完全不会写代码的情况下,用 Cursor 完成一个项目是可能的,但可能性不大。除非这个项目非常简单。
有过开发经验的朋友一定知道,一个项目在整个研发周期内多多少少会遇到一些问题,这些问题和挑战需要程序员们来解决,这些问题有大有小。我想表达的是,无论多少,你一定会遇到问题,而且很大概率是棘手的、不好解决的、针对你当前项目本身特定上下文的问题。
那么问题来了,遇到这种问题,你如果完全不懂开发,不会写代码,仅凭着使用 AI 工具开发项目的热情和很可能出现幻觉的模型是很可能搞不定的。即使能搞定也会相当浪费时间和资源。生产率极其低!
这是我在使用 Cursor 开发了几个项目后的结论,我不是说 Cursor 不好,相反,我觉得它很好,但工具是需要配备给适合使用它的人,无脑的宣传它的万能是不对的。
而对于我来讲,利用 Cursor 解决问题、开发项目,在理想的情况下真的是分分钟的事儿。别忘了,我有 15 年的研发经验啊。拥有这样的经验和基础知识再加上 Cursor 确实如虎添翼。
现在,任何语言,任何技术栈在我面前都不是问题,计算机世界的大门从来没有像今天一样对我这样敞开。我的学习效率和解决问题的效率有了极大的提高,说 10 倍可能夸张,至少有 3-5 倍。
所以,我认为 Cursor 这类优秀的 AI 编程工具就像一个你的结对编程的伙伴,你们是协作关系,他像一名高级工程师,你们互相引导、激发、创造!
你想想什么人才能结对编程,一个什么都不懂的人和你结对你觉得靠谱吗? 我想你明白我想表达的是什么了。
最近在社交媒体看到知名博主 “宝玉” 总结的 AI 编程工具的使用原则,结合我自己的使用经验我觉得总结得很靠谱,分享给大家:
-
准确的描述清楚需求
-
架构能力,合理的将复杂系统拆分成松耦合的模块,让 AI 可以在一次会话中处理
-
专业编程能力,能分辨 AI 生成的代码的好坏
-
调试能力,当 AI 生成的代码出现问题,能快速定位,自己或者借助 AI