Featured image of post 基于 Vue2 的文件预览解决方案，全部代码由 Cursor AI 助手生成
AI

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

项目介绍

这是一个基于 Vue 2 的文件预览解决方案，支持主流办公文件的在线预览，包括 Word、Excel、PPT 和 PDF 文件。本项目采用 Vue 2 技术栈开发，确保了更好的兼容性和稳定性。

该项目目前已开源：https://github.com/xiaobox/file-preview-demo

Image

项目开发说明

本项目是一个特殊的实验性项目，完全通过与 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 维护的成熟方案，功能更加完整
  • 支持文档大纲、缩放、搜索等高级功能
  • 支持表单填写和注释
  1. 性能优势：
  • 支持分页按需加载，减少内存占用
  • 渲染性能更好，适合大型 PDF 文件
  • 支持流式加载，无需等待整个文件下载完成
  1. 兼容性：
  • 浏览器兼容性更好
  • 支持更多 PDF 特性和格式
  • 渲染效果更接近原生
  1. 社区支持：
  • 有庞大的社区支持
  • 问题修复和更新及时
  • 文档完善，示例丰富
  1. 实践经验：
  • 在测试中发现，使用 @vue-office/pdf 预览大型 PDF 文件时，在移动端存在严重问题
  • 具体表现为：在文件未完全加载完成时，页面会自动多次重新加载
  • 这可能是由移动设备内存限制或操作系统的内存管理机制导致
  • 而使用 PDF.js 的分页渲染机制可以很好地解决这个问题

渲染实现说明

PDF.js 的渲染流程：

  1. 核心渲染过程：

     1const page = await pdfDoc.getPage(pageNumber)
 2const viewport = page.getViewport({ scale: scale })
 3const canvas = document.getElementById(`pdf-page-${pageNumber}`)
 4const context = canvas.getContext('2d')
 5canvas.height = viewport.height
 6canvas.width = viewport.width
 7const renderContext = {
 8  canvasContext: context,
 9  viewport: viewport
10}
11await page.render(renderContext).promise

  2. 技术细节：

  • 直接将 PDF 内容渲染到 Canvas，而不是转换成图片再加载
  • 每个页面使用独立的 Canvas 元素
  • 采用分页渲染机制，提升渲染性能
  • 支持缩放、旋转等视图操作
  1. 性能优化：
  • 实现分页渲染，避免一次性渲染所有页面
  • 使用 Canvas 直接渲染，减少内存占用
  • 支持流式加载，提升首屏加载速度
  1. 移动端适配：
  • 针对移动端内存限制进行优化
  • 避免了整个文件内容同时加载到内存的问题
  • 解决了大型 PDF 在移动端反复重载的问题

旧版 Office 格式支持方案

如果需要支持旧版 Office 格式（.doc、.xls、.ppt），建议采用以下方案：

  1. 服务器转换方案：
  • 使用 LibreOffice/OpenOffice 搭建文件转换服务
  • 将旧版格式转换为新版格式后再预览
  • 优点：可控性强，无需第三方服务
  • 缺点：需要自行维护服务器
  1. 商业转换服务：
  • 使用 Microsoft Office 365 API
  • 使用金山 WPS 开放平台
  • 优点：稳定性好，维护成本低
  • 缺点：需要付费，依赖第三方服务
  1. 客户端转换：
  • 提示用户使用 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

© 2019 – 2026 小盒子的技术分享
— 位旅人路过 — 次翻阅 初次见面