支持的文件类型
React File Preview 支持多种常见的文件格式预览。
图片格式
支持所有浏览器原生支持的图片格式:
- JPEG/JPG -
.jpg,.jpeg - PNG -
.png - GIF -
.gif(支持动画) - WebP -
.webp - SVG -
.svg - BMP -
.bmp - ICO -
.ico
特性
- 缩放和平移(范围 0.01x - 10x)
- 旋转(顺时针/逆时针 90°)
- 鼠标滚轮缩放
- 拖拽移动
视频格式
支持 HTML5 视频格式:
- MP4 -
.mp4 - WebM -
.webm - OGG -
.ogg,.ogv - MOV -
.mov - AVI -
.avi - MKV -
.mkv - M4V -
.m4v - 3GP -
.3gp - FLV -
.flv
特性
- 基于 Video.js 播放器
- 播放/暂停控制
- 音量调节
- 进度条
- 全屏播放
音频格式
支持 HTML5 音频格式:
- MP3 -
.mp3 - WAV -
.wav - OGG -
.ogg - M4A -
.m4a - AAC -
.aac - FLAC -
.flac
特性
- 播放/暂停控制
- 音量调节
- 进度条
- 快进/快退(±10 秒)
PDF 文档
- PDF -
.pdf
特性
- 页面导航(上一页/下一页)
- 缩放控制(0.01x - 10x)
- 连续滚动浏览
- 页码显示
Office 文档
Word 文档
- DOCX -
.docx
Excel 表格
- XLSX -
.xlsx
PowerPoint 演示文稿
- PPTX -
.pptx - PPT -
.ppt
特性
- 保留原始格式
- 支持图片和表格
- 响应式布局
- 显示所有工作表(Excel)
- 平铺/幻灯片两种显示模式(PowerPoint,16:9 宽高比)
Outlook 邮件
- MSG -
.msg
特性
- 解析邮件头信息(发件人、收件人、主题、日期)
- 邮件正文渲染
- 附件列表展示
电子书
- EPUB -
.epub
特性
- 基于 epub.js 渲染
- 左右翻页(按钮 / 键盘方向键)
- 章节自动分页与页码显示
- 自适应屏幕宽度
Markdown 文档
- Markdown -
.md,.markdown
特性
- GitHub Flavored Markdown (GFM) 支持
- 代码语法高亮
- 表格支持
- 任务列表
- 自动链接
代码文件
支持 40+ 种编程语言的语法高亮:
- JavaScript/TypeScript -
.js,.jsx,.ts,.tsx - Python -
.py - Java -
.java - C/C++ -
.c,.cpp,.h - C# -
.cs - Go -
.go,.mod - Rust -
.rs - Lua -
.lua - Vim Script -
.vim - PHP -
.php - Ruby -
.rb - Swift -
.swift - Kotlin -
.kt - HTML -
.html - CSS/SCSS/Sass/Less -
.css,.scss,.sass,.less - YAML -
.yaml,.yml - TOML -
.toml - INI -
.ini,.conf,.env - Lock 文件 -
.lock - Diff/Patch -
.diff,.patch - Shell -
.sh,.bash,.zsh - SQL -
.sql - Log -
.log
特性
- 语法高亮(VS Code Dark+ 主题)
- 自动语言检测
- 行号显示
CSV / TSV 表格
- CSV -
.csv - TSV -
.tsv
特性
- 纯前端解析,无第三方依赖
- 支持 RFC 4180 双引号转义与字段内换行
- 表格式渲染,首行自动识别为表头
- 显示行数/列数统计
XML
- XML -
.xml
特性
- 使用浏览器原生
DOMParser做格式校验 - 自动缩进美化
- 语法高亮
字幕 / 歌词文件
- SRT -
.srt - WebVTT -
.vtt - LRC -
.lrc(基础歌词,[mm:ss.xx]行时间戳,支持[ti:][ar:][al:]等元数据) - Enhanced LRC -
.elrc(增强歌词,行内<mm:ss.xx>逐字时间戳) - ASS / SSA -
.ass/.ssa(Advanced SubStation Alpha,自动剥离\N\h与{...}样式覆盖码) - TTML / DFXP -
.ttml/.dfxp(W3C / Apple Music 使用的 XML 字幕,支持begin/end/dur与<br/>)
特性
- 纯前端解析,零第三方依赖
- 自动按内容/扩展名识别格式
- 结构化 cue 列表展示(索引、时间区间、文本)
- LRC / ELRC 自动展示元数据(标题 / 艺术家 / 专辑 / 偏移……)
- ELRC 逐字时间戳以词条形式排列展示
- ASS / SSA 同步显示 Style 标签,自动应用
offset偏移
JSON
- JSON -
.json
特性
- 自动格式化缩进
- 语法高亮
ZIP 压缩包
- ZIP -
.zip
特性
- 基于 JSZip 解析压缩包目录结构
- 左侧树形目录 + 右侧内嵌预览
- 内嵌预览文本、代码(带高亮)与图片
- 其他类型可通过"下载"按钮导出为独立文件
纯文本
- TXT -
.txt - 其他未识别的文本文件
不支持的格式
对于不支持的文件格式,组件会显示一个友好的提示界面,包含:
- 文件名和大小
- 下载按钮
- 文件类型说明
文件类型检测
组件会按以下优先级检测文件类型:
- MIME 类型:如果提供了
type属性,优先使用 - 文件扩展名:从文件名自动推断 MIME 类型
- 默认类型:无法识别时标记为
unsupported
支持的文件类型枚举:
image- 图片文件pdf- PDF 文档docx- Word 文档xlsx- Excel 表格pptx- PowerPoint 演示文稿msg- Outlook 邮件epub- EPUB 电子书video- 视频文件audio- 音频文件markdown- Markdown 文件json- JSON 文件csv- CSV/TSV 文件xml- XML 文件subtitle- SRT / VTT / LRC / ELRC / ASS / SSA / TTML 字幕与歌词文件zip- ZIP 压缩包text- 其他文本和代码文件unsupported- 不支持的类型