基于 Vue2 的文件预览解决方案,全部代码由 Cursor AI 助手生成

121 阅读7分钟

项目介绍

这是一个基于 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 的原因:

  1. 功能完整性:

    • PDF.js 是 Mozilla 维护的成熟方案,功能更加完整
    • 支持文档大纲、缩放、搜索等高级功能
    • 支持表单填写和注释
  2. 性能优势:

    • 支持分页按需加载,减少内存占用
    • 渲染性能更好,适合大型 PDF 文件
    • 支持流式加载,无需等待整个文件下载完成
  3. 兼容性:

    • 浏览器兼容性更好
    • 支持更多 PDF 特性和格式
    • 渲染效果更接近原生
  4. 社区支持:

    • 有庞大的社区支持
    • 问题修复和更新及时
    • 文档完善,示例丰富
  5. 实践经验:

    • 在测试中发现,使用 @vue-office/pdf 预览大型 PDF 文件时,在移动端存在严重问题
    • 具体表现为:在文件未完全加载完成时,页面会自动多次重新加载
    • 这可能是由移动设备内存限制或操作系统的内存管理机制导致
    • 而使用 PDF.js 的分页渲染机制可以很好地解决这个问题

渲染实现说明

PDF.js 的渲染流程:

  1. 核心渲染过程:

    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
    
  2. 技术细节:

    • 直接将 PDF 内容渲染到 Canvas,而不是转换成图片再加载
    • 每个页面使用独立的 Canvas 元素
    • 采用分页渲染机制,提升渲染性能
    • 支持缩放、旋转等视图操作
  3. 性能优化:

    • 实现分页渲染,避免一次性渲染所有页面
    • 使用 Canvas 直接渲染,减少内存占用
    • 支持流式加载,提升首屏加载速度
  4. 移动端适配:

    • 针对移动端内存限制进行优化
    • 避免了整个文件内容同时加载到内存的问题
    • 解决了大型 PDF 在移动端反复重载的问题

旧版 Office 格式支持方案

如果需要支持旧版 Office 格式(.doc、.xls、.ppt),建议采用以下方案:

  1. 服务器转换方案:

    • 使用 LibreOffice/OpenOffice 搭建文件转换服务
    • 将旧版格式转换为新版格式后再预览
    • 优点:可控性强,无需第三方服务
    • 缺点:需要自行维护服务器
  2. 商业转换服务:

    • 使用 Microsoft Office 365 API
    • 使用金山 WPS 开放平台
    • 优点:稳定性好,维护成本低
    • 缺点:需要付费,依赖第三方服务
  3. 客户端转换:

    • 提示用户使用 Office 或 WPS 另存为新版格式
    • 优点:实现简单,无需额外服务
    • 缺点:用户体验不够友好

最后

谈谈感受

最近团队在开发文件预览的功能,本来觉得是一个比较常规和普遍的功能就没多过问,后来前端同学反馈问题比较多,比如移动端的兼容问题、新旧 office 格式文件的兼容问题、pdf 大文件预览问题等等。于是参与想了几个方案,本文介绍的项目是一个纯前端 解决方案。整体来看占用的资源比较小,是一个性价比很高的方案。当然,这是在解决了刚才提到的那些问题的前提下。

这个项目从技术难度上并没有多高,但从过程和形式上却很有意思。

因为这是又一个我用 Cursor 在不手写任何一行代码的基础上完成的项目。

我本来预计半天的时间就能搞定,没想到整整搞了一天。

无论是在技术社区还是在社交媒体,经常看到有人说:自己不会写代码,用 Cursor 在自己不写一行代码的情况下,用很短的时间完成了一个 app 或者一个项目。

其实这样的项目,我已经写了好几个了,但区别是,我是一名具有 15 年研发经验的工程师。

从我的角度来说,我觉得:在自己完全不会写代码的情况下,用 Cursor 完成一个项目是可能的,但可能性不大。除非这个项目非常简单。

有过开发经验的朋友一定知道,一个项目在整个研发周期内多多少少会遇到一些问题,这些问题和挑战需要程序员们来解决,这些问题有大有小。我想表达的是,无论多少,你一定会遇到问题,而且很大概率是棘手的、不好解决的、针对你当前项目本身特定上下文的问题。

那么问题来了,遇到这种问题,你如果完全不懂开发,不会写代码,仅凭着使用 AI 工具开发项目的热情和很可能出现幻觉的模型是很可能搞不定的。即使能搞定也会相当浪费时间和资源。生产率极其低!

这是我在使用 Cursor 开发了几个项目后的结论,我不是说 Cursor 不好,相反,我觉得它很好,但工具是需要配备给适合使用它的人,无脑的宣传它的万能是不对的。

而对于我来讲,利用 Cursor 解决问题、开发项目,在理想的情况下真的是分分钟的事儿。别忘了,我有 15 年的研发经验啊。拥有这样的经验和基础知识再加上 Cursor 确实如虎添翼。

现在,任何语言,任何技术栈在我面前都不是问题,计算机世界的大门从来没有像今天一样对我这样敞开。我的学习效率和解决问题的效率有了极大的提高,说 10 倍可能夸张,至少有 3-5 倍。

所以,我认为 Cursor 这类优秀的 AI 编程工具就像一个你的结对编程的伙伴,你们是协作关系,他像一名高级工程师,你们互相引导、激发、创造!

你想想什么人才能结对编程,一个什么都不懂的人和你结对你觉得靠谱吗? 我想你明白我想表达的是什么了。

最近在社交媒体看到知名博主 “宝玉” 总结的 AI 编程工具的使用原则,结合我自己的使用经验我觉得总结得很靠谱,分享给大家:

  1. 准确的描述清楚需求

  2. 架构能力,合理的将复杂系统拆分成松耦合的模块,让 AI 可以在一次会话中处理

  3. 专业编程能力,能分辨 AI 生成的代码的好坏

  4. 调试能力,当 AI 生成的代码出现问题,能快速定位,自己或者借助 AI