---
title: "基于 Vue2 的文件预览解决方案，全部代码由 Cursor AI 助手生成"
description: "基于 Vue2 的纯前端 Office 与 PDF 文件预览方案，全部代码由 Cursor 生成，介绍 PDF.js 分页渲染等技术选型，并总结 AI 编程工具需以扎实研发经验为前提的使用体会。"
date: 2025-01-17T04:35:49Z
canonical: https://xiaobox.github.io/p/2025-01-17-ji-yu-vue2-de-wen-jian-yu-lan-jie-jue-fang-an-quan-bu-dai-ma/
author: 小盒子
categories: ["AI"]
tags: ["Cursor", "性能优化"]
source: https://mp.weixin.qq.com/s/trNs4OMY6u2CB1RUPxpipA
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
---

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

## 项目介绍

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

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

![Image](https://pub-f29bf2b53160470c9a85250116509a24.r2.dev/post/2025-01-17-ji-yu-vue2-de-wen-jian-yu-lan-jie-jue-fang-an-quan-bu-dai-ma/001-c71411d9.png)

## 项目开发说明

本项目是一个特殊的实验性项目，完全通过与 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 维护的成熟方案，功能更加完整
-   支持文档大纲、缩放、搜索等高级功能
-   支持表单填写和注释

3.  性能优势：

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

5.  兼容性：

-   浏览器兼容性更好
-   支持更多 PDF 特性和格式
-   渲染效果更接近原生

7.  社区支持：

-   有庞大的社区支持
-   问题修复和更新及时
-   文档完善，示例丰富

9.  实践经验：

-   在测试中发现，使用 @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 元素
-   采用分页渲染机制，提升渲染性能
-   支持缩放、旋转等视图操作

4.  性能优化：

-   实现分页渲染，避免一次性渲染所有页面
-   使用 Canvas 直接渲染，减少内存占用
-   支持流式加载，提升首屏加载速度

6.  移动端适配：

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

### 旧版 Office 格式支持方案

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

1.  服务器转换方案：

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

3.  商业转换服务：

-   使用 Microsoft Office 365 API
-   使用金山 WPS 开放平台
-   优点：稳定性好，维护成本低
-   缺点：需要付费，依赖第三方服务

5.  客户端转换：

-   提示用户使用 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**