ce6ee9f2975a3381eec29df5b0532861bcf8c4c8
- Add core/i18n.ts: LocaleMessages type, zhCN/enUS translations,
LocaleProvider context, useLocale() hook
- Externalize ~50+ hardcoded Chinese/English UI strings across 14 components:
XlsxPreview, PptxPreview, EpubPreview, MarkdownPreview, HtmlPreview,
RtfPreview, SvgPreview, PlainTextLargePreview, LargeFileHint,
PreviewFallback, UnsupportedPluginPreview, UnsupportedLegacyOfficePreview,
CodePreview, ShikiSourceView
- Update UnsupportedPluginPreview.test.tsx to use LocaleProvider wrapper
- All 55 tests pass, typecheck clean, production build succeeds
Usage:
import { LocaleProvider, enUS } from './core/i18n';
<LocaleProvider value={enUS}>
<PluginPreviewRenderer source={file} />
</LocaleProvider>
Co-Authored-By: Claude <noreply@anthropic.com>
FileVista
FileVista 是一个纯浏览器端文件预览工具集,基于 Next.js、React、TypeScript 和插件化 Preview Renderer 构建。支持 20+ 文件格式(PDF、Markdown、JSON、代码、DOCX、PPTX、XLSX、EPUB、图片、视频、音频等),预览内核支持 File / Blob / ArrayBuffer / URL 等数据源,当前公开 Demo 支持本地文件上传和可跨域访问的远程 URL 预览。所有处理均在浏览器内完成,文件不会上传服务器。
在线 Demo:
https://coderlambert.github.io/filevista/
Features
- 支持本地文件上传,也支持可跨域访问的远程 URL 预览
- 预览内核支持 File / Blob / ArrayBuffer / URL 等数据源
- 拖拽上传、多文件切换、TabCache 状态保持
- Legacy Renderer / Plugin Renderer 双引擎切换
- 按文件类型懒加载 Preview Adapter
- GitHub Actions CI 自动验证
- GitHub Pages 自动部署
支持文件类型
| 类型 | 扩展名 | Plugin Renderer | 说明 |
|---|---|---|---|
| ✅ | PDF.js 浏览器端渲染 | ||
| Code | .js/.ts/.tsx/.py/.go 等 | ✅ | Shiki 高亮 |
| JSON | .json | ✅ | 复用 Source Code Plugin |
| Text | .txt/.log/.env | ✅ | 纯文本预览 |
| Markdown | .md/.mdx | ✅ | GFM 渲染 |
| CSV | .csv | ✅ | 表格预览 |
| HTML | .html/.htm | ✅ | 安全预览 + 源码 |
| SVG | .svg | ✅ | 预览 + 源码 |
| Image | .png/.jpg/.webp/.gif 等 | ✅ | 浏览器原生预览 |
| Audio | .mp3/.wav/.ogg 等 | ✅ | 浏览器原生播放器 |
| Video | .mp4/.webm/.mov 等 | ✅ | 浏览器原生播放器 |
| ZIP | .zip | ✅ | 压缩包预览 |
| EPUB | .epub | ✅ | EPUB 预览 |
| RTF | .rtf | ✅ | rtf.js 富文本渲染,复杂内容自动降级为文本预览 |
| DOCX | .docx | ✅ | 现代 Word 格式 |
| PPTX | .pptx | ✅ | 现代 PowerPoint 格式 |
| XLSX | .xlsx | ✅ | 现代 Excel 格式 |
| DOC | .doc | ⚠️ | 旧版 Word 二进制格式,降级支持 |
| PPT | .ppt | ❌ | 建议转为 .pptx |
| XLS | .xls | ❌ | 建议转为 .xlsx |
本地开发
bun install
bun run dev
访问:
http://localhost:3000
本地验证
bun run lint
bun run test:run
bun run build
或:
bun run check
GitHub Pages 构建
bun run build:pages
GitHub Actions
当前仓库包含以下工作流:
.github/workflows/ci.yml # lint / test / build
.github/workflows/pages.yml # lint / test / build:pages / deploy
CI 会自动执行 lint、test、build。Pages workflow 会自动构建并部署到 GitHub Pages。
当前限制
- 不承诺完整还原所有 Office 排版效果
.doc为旧版 Word 二进制格式,仅降级支持(文本提取).ppt/.xls暂不支持浏览器端预览- PPTX 中的 EMF / WMF 图片无法被浏览器原生显示
- 大文件在浏览器端解析时可能卡顿,受浏览器性能限制
- 远程 URL 预览依赖目标服务器 CORS 配置,若目标服务器未允许浏览器跨域访问,则无法直接预览
- 所有预览均在浏览器端执行,最终效果受浏览器能力影响
文档
- 用户版支持矩阵:docs/user-facing-preview-support.md
- Plugin 开发指南:docs/plugin-development-guide.md
- Plugin Renderer 验证矩阵:docs/preview-plugin-validation-matrix.md
- GitHub Pages 发布检查清单:docs/github-pages-release-checklist.md
Roadmap
下一阶段建议:
Stage 18:预览性能与大文件处理优化
候选方向:
- 大文件读取进度提示
- PDF / Office 渲染取消机制
- Plugin 加载失败 fallback
- Worker 化部分解析任务
- 统一错误边界
Description
React file viewer for PDF, DOCX, PPTX, XLSX, EPUB, Markdown, code and media—20+ formats, rendered entirely in the browser.
https://coderlambert.github.io/filevista/
browser-onlyclient-sidedocument-previewdocument-viewerdocxepubfile-previewfile-vieweroffice-viewerpdf-viewerplugin-systempptxprivacyreactreact-file-viewertypescriptxlsx
Readme
249 MiB
Releases
18
Languages
TypeScript
81.1%
CSS
12.1%
HTML
2.7%
Shell
2.4%
JavaScript
1.2%
Other
0.5%