# file-viewer

**Repository Path**: xqs-collab/file-viewer

## Basic Information

- **Project Name**: file-viewer
- **Description**: 基于vue3 + @file-viewer/vue3 + @file-viewer/preset-office + @file-viewer/preset-lite 在线预览的demo
兼容浏览器Chrome 109+
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-05
- **Last Updated**: 2026-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文件在线预览 Demo

基于 Vue 3 + TypeScript + @file-viewer 实现的文件在线预览演示项目。

## 技术栈

- **前端框架**: Vue 3.5 + TypeScript
- **构建工具**: Vite 6
- **UI 组件库**: Element Plus
- **文件预览**: @file-viewer/vue3 + @file-viewer/preset-office + @file-viewer/preset-lite
- **浏览器兼容**: Chrome 109+

## 支持的文件格式

### 办公文档

| 格式 | 类型 | 说明 |
|------|------|------|
| `.docx` | Word 文档 | 支持完整格式渲染 |
| `.doc` | Word 文档 | 兼容旧版 Word 格式 |
| `.xlsx` | Excel 表格 | 支持多 Sheet 切换 |
| `.xls` | Excel 表格 | 兼容旧版 Excel 格式 |
| `.pptx` | PowerPoint | 支持幻灯片预览 |
| `.ppt` | PowerPoint | 兼容旧版 PPT 格式 |
| `.pdf` | PDF 文件 | 支持缩放、搜索、打印 |
| `.ofd` | OFD 文件 | 支持国产版式文档格式 |
| `.rtf` | RTF 文件 | 富文本格式预览 |

### 代码与文本

| 格式 | 类型 | 说明 |
|------|------|------|
| `.txt` | 文本文件 | 纯文本预览 |
| `.md` | Markdown | Markdown 渲染预览 |
| `.json` | JSON | 语法高亮 |
| `.js` | JavaScript | 语法高亮 |
| `.ts` | TypeScript | 语法高亮 |
| `.css` | CSS | 语法高亮 |
| `.html` | HTML | 语法高亮 |

### 图片

| 格式 | 类型 | 说明 |
|------|------|------|
| `.png` | 图片 | 支持缩放、旋转 |
| `.jpg` / `.jpeg` | 图片 | 支持缩放、旋转 |
| `.gif` | 图片 | 动图支持 |
| `.webp` | 图片 | 现代图片格式 |
| `.svg` | 图片 | 矢量图支持 |

## 功能特性

- 📁 **文件上传**: 支持拖拽上传、点击上传
- 🔍 **文件搜索**: PDF 内文搜索
- 🔍 **缩放控制**: 支持放大、缩小、适应宽度
- 🖨️ **打印功能**: 直接打印预览内容
- 📥 **下载功能**: 支持下载原始文件
- 📱 **响应式设计**: 适配不同屏幕尺寸
- 🌙 **主题切换**: 支持亮色/暗色主题（默认亮色）

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:5174

### 生产构建

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 项目结构

```
fileviewer-demo/
├── public/              # 静态资源
├── src/
│   ├── components/      # 组件
│   │   ├── FileUploader.vue   # 文件上传组件
│   │   └── FilePreview.vue    # 文件预览组件
│   ├── types/           # 类型定义
│   │   └── file.ts
│   ├── App.vue          # 根组件
│   ├── main.ts          # 入口文件
│   └── style.css        # 全局样式
├── index.html           # HTML 入口
├── vite.config.ts       # Vite 配置
├── tsconfig.json        # TypeScript 配置
└── package.json         # 项目配置
```

## 浏览器兼容性

- Chrome 109+
- Edge 109+
- Firefox 102+
- Safari 15+

> **注意**: 由于 pdfjs-dist 6.x 使用了较新的 JavaScript 特性（如 Top-level await），构建目标设置为 ES2022。如需兼容更老的浏览器，请考虑使用 pdfjs-dist 4.x 版本。

## 已知问题与解决方案

### 1. Chrome 109 中 AbortSignal.any 报错

**问题**: `TypeError: AbortSignal.any is not a function`

**解决方案**: 在 `index.html` 中添加了 polyfill，确保在所有模块加载前执行。

### 2. GenericL10n 报错

**问题**: `Cannot destructure property 'href' of 'document.querySelector(...)' as it is null`

**解决方案**: 修改了 pdfjs-dist 源码，在 `GenericL10n.#getPaths()` 方法中添加了空值检查。

### 3. TXT 文件中文乱码

**问题**: Windows 中文系统的 TXT 文件以 GBK 编码保存时显示乱码

**解决方案**: 对于文本文件，使用 URL prop 替代 File prop，让浏览器自动处理编码。

## 相关链接

- [@file-viewer 官方文档](https://doc.file-viewer.app/)
- [Vue 3 官方文档](https://vuejs.org/)
- [Vite 官方文档](https://vitejs.dev/)
- [Element Plus 官方文档](https://element-plus.org/)

## License

Apache-2.0