# file-viewer
**Repository Path**: work25/file-viewer
## Basic Information
- **Project Name**: file-viewer
- **Description**: 基于 [open-file-viewer](https://github.com/xushanpei/open-file-viewer) 的多格式文件预览示例
- **Primary Language**: JavaScript
- **License**: MIT-0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-07-07
- **Last Updated**: 2026-07-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
基于 [open-file-viewer](https://github.com/xushanpei/open-file-viewer) 的多格式文件预览示例，使用 Vue 3 + TypeScript + Vite 构建。
所有文件均在浏览器本地解析预览，不上传至任何服务器。
## 特性
- 浏览器端本地预览，无服务端依赖
- 支持 14 类、共 130+ 种文件格式
- 拖放或点击两种选择方式
- 亮色 / 暗色主题，跟随系统并支持手动切换
- 完全键盘可达，遵循 `prefers-reduced-motion`
- 响应式布局，移动端自适应
## 支持的格式
| 类别 | 扩展名 |
|------|--------|
| 图片 | jpg, jpeg, png, gif, webp, avif, svg, bmp, tiff, heic, heif |
| 视频 | mp4, webm, mov, m4v, avi, mkv, flv, wmv, m3u8, m2ts |
| 音频 | mp3, wav, ogg, aac, m4a, flac, opus, mid, wma |
| 文本 / 代码 | txt, md, json, yaml, xml, csv, js, ts, tsx, vue, html, css, py, go, rs, sql, sh |
| PDF / 电子书 | pdf, epub, xps, oxps |
| Office | doc, docx, docm, dot, rtf, odt, xls, xlsx, xlsm, xlsb, pptx, pptm, odp, wps, et, dps |
| OFD | ofd |
| 压缩包 | zip, rar, 7z, tar, gz, tgz, bz2, xz |
| 邮件 | eml, msg, mbox |
| 绘图 / 白板 | drawio, dio, excalidraw, tldraw |
| CAD / 工程 | dxf, dwg, dwf, step, stp, iges, igs, ifc, skp, sldprt, gds, oas, oasis |
| 3D 模型 | gltf, glb, obj, stl, fbx, dae, ply, 3mf, usd, usdz |
| GIS | geojson, topojson, kml, kmz, gpx, shp |
| 数据 / 资产 | sqlite, db, parquet, avro, wasm, psd, psb, ai, eps, ps, ttf, otf, woff, woff2 |
## 快速开始
环境要求：Node.js 18+ 与 npm。
```bash
# 安装依赖
npm install
# 启动开发服务器（默认 http://localhost:5173）
npm run dev
# 类型检查 + 构建生产版本到 dist/
npm run build
# 本地预览构建产物
npm run preview
```
## 使用说明
1. 在左侧列表中选择目标格式分类
2. 将文件拖入中间的虚线框，或点击该区域选择文件
3. 文件在下方预览区中显示
4. 顶栏右侧可切换亮 / 暗主题
## 技术栈
| 用途 | 依赖 |
|------|------|
| 框架 | Vue 3 (`
