file-preview-demo

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

file-preview-demo

★ 12 Open GitHub ↗

基于 Vue.js 的文件预览解决方案，支持 Word、Excel、PPT、PDF 在线预览，完美适配 PC 和移动端，全部代码由 Cursor AI 助手生成。

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 文件预览解决方案

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

![项目首页截图](https://xiaobox-public-images.oss-cn-beijing.aliyuncs.com/imagesCleanShot%202025-01-17%20at%2010.52.53%402x.png)

## 功能特性

- 支持文件类型：
  - 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. 核心渲染过程：
   ```javascript
   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 另存为新版格式
   - 优点：实现简单，无需额外服务
   - 缺点：用户体验不够友好

## 快速开始

### 安装依赖
```bash
npm install
```

### 开发环境运行
```bash
npm run serve
```

### 生产环境构建

```bash
npm run build
```

### 代码检查

```bash
npm run lint
```

## 项目结构

```
src/
├── components/        # 公共组件
├── views/            # 页面组件
│   ├── Home.vue      # 首页（文件选择）
│   ├── FilePreview.vue   # 文件预览页
│   └── ExcelPreview.vue  # Excel预览页
├── router/           # 路由配置
└── App.vue          # 根组件

public/
├── files/           # 本地测试文件
└── pdfjs/           # PDF.js 相关文件
```

## 使用示例

### 本地文件预览
将文件放在 `public/files` 目录下，然后通过首页的预览按钮进行预览。

### URL 文件预览
在首页输入文件 URL 后点击预览按钮即可。

示例 URL：
- Word：http://static.shanhuxueyuan.com/test.docx
- Excel：http://static.shanhuxueyuan.com/test.xlsx
- PDF：http://static.shanhuxueyuan.com/test.pdf
- PPT：https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pptx

## 注意事项

1. 文件格式限制：
   - 仅支持新版 Office 格式：.docx、.xlsx、.pptx
   - 不支持旧版 Office 格式：.doc、.xls、.ppt
   - 如需预览旧版格式，请参考上述"旧版 Office 格式支持方案"
2. 由于浏览器的跨域限制，某些网站的文件可能无法直接预览
3. 建议将较大文件先下载到本地后再进行预览
4. 确保文件 URL 可以被公开访问

## 参考资源

- [vue-office 官方文档](https://501351981.github.io/vue-office/examples/docs/guide/)
- [vue-office GitHub](https://github.com/501351981/vue-office)
- [vue-office Gitee](https://gitee.com/ye-jizeng/vue-office)
- [PDF.js](https://mozilla.github.io/pdf.js/)

## License

MIT

## 项目开发说明

本项目是一个特殊的实验性项目，完全通过与 Cursor（AI 驱动的智能 IDE）的交互来完成。从项目初始化到最终完成，所有的代码都是通过与 Cursor AI 助手的对话生成的，没有手动编写任何一行代码。这个开发过程展示了 AI 辅助编程的潜力，以及如何利用先进的 AI 工具来加速开发流程。

主要特点：
- 零手写代码：所有代码均由 Cursor AI 生成
- 完整对话驱动：通过自然语言描述需求，AI 理解并实现功能
- 快速迭代：AI 能够根据反馈快速调整和优化代码
- 高质量输出：生成的代码遵循最佳实践，包含完整的错误处理和用户体验考虑

这种开发方式展示了 AI 在软件开发中的应用前景，以及如何利用 AI 工具来提高开发效率。

file-preview-demo

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README