88a96525adcee4923985098e81db4cbc19fa6506
After the apps/packages split, several setup gaps surfaced when running the full lint/typecheck/test/build chain: Build & install - .npmrc: switch to npmmirror + raise fetch-timeout (next/swc tarballs were timing out against npmjs.org) - pnpm-workspace.yaml: approve esbuild build script (tsup needs it) - pnpm-lock.yaml: regenerated for the new workspace layout - .gitignore: ignore apps/*/.next, apps/*/out, packages/*/dist (the root-only globs no longer covered post-split) Script ordering — playground typecheck/dev/build read types from the library's dist/, so the lib must build first: - root package.json: prepend build:lib to dev/typecheck/build:playground - root package.json: add start/preview scripts for previewing prod build TypeScript config - tsconfig.base.json: drop incremental: true (broke tsup's DTS step; TS5074 — needs tsBuildInfoFile when emitted from tsup) - apps/playground/tsconfig.json: re-add incremental locally (Next uses it) Library typecheck fixes — needed to make tsup's DTS step pass: - utils.ts, core/binary.ts: drop Uint8Array<ArrayBuffer> generic (5.7+ syntax; we keep ^5 in deps so the source must compile on older TS too) - XlsxPreview.tsx: cast bytes.buffer as ArrayBuffer (now ArrayBufferLike by default; exceljs's .xlsx.load expects ArrayBuffer) - icons.tsx: wrap rest-children in Children.toArray() so multi-path icons (EyeIcon, Code2Icon, …) get auto-keys — was throwing the 'unique key prop' warning on every page load - vitest.setup.ts → src/__tests__/setup.ts + update vitest.config.ts: the setup file was outside rootDir 'src', breaking tsc --noEmit; moving it under src/__tests__ keeps tsup's entry filter happy Cleanup - apps/playground/src/lib/shiki.ts: orphan from the split (no importers; the real shiki module lives in packages/file-preview/src/shiki.ts) After all this: lint / typecheck / test / build:lib / build:playground all green. 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%