File Viewer 最近解决了什么：Office 图表、50 万行文本、缩略图和漫画模式
File Viewer 最近解决了什么：Office 图表、50 万行文本、缩略图和漫画模式
File Viewer 过 1000 Star 时，我写过一次阶段复盘。最近公开仓又走到 1,406 Star，版本也从 2.1.23 推进到了 2.1.27。
不过这次更想聊的不是数字，而是几个真实问题终于有了更完整的答案：Word 和 Excel 里的图表怎么还原，几十万行文本怎么稳定打开，文件列表怎么在浏览器里批量生成缩略图，以及压缩包里的漫画怎样直接进入阅读模式。
1. Office 图表不再只是一个空白位置
企业文档里的图表经常不是装饰，而是报表和结论本身。以前打开带图表的 DOCX、XLSX，文字和单元格能出来，但图表可能缺失、位置不对，或者只剩一块空白。
最近基于真实 issue 样本补上了两条链路：DOCX 里的图表关系、数据和样式解析，以及 XLSX 工作表里的图表解析与浏览器端渲染。修复后，折线图、柱状图能和正文、表格一起呈现，并且用对应样本加入了自动化回归。
这类修复的价值很直接：用户在审批页、知识库或附件中心里看到的不再是“文档大概能开”，而是能读到真正影响判断的数据。
2. 50 多万行文本，靠虚拟滚动保持稳定
日志、代码导出、数据转储经常大得离谱。一次性把几十万行节点塞进 DOM，页面会卡住，搜索和高亮也会跟着失去响应。
新的大文本链路按可视区域渲染，只保留当前视口附近的内容。测试样本达到 520,002 行，仍然可以滚动到末尾并定位搜索结果；代码高亮也会在超大文件下主动关闭，优先保证内容可读和交互稳定。
这里解决的不是“能不能把文本塞进页面”，而是打开之后还能不能继续工作。
3. 深色模式开始覆盖真正的渲染内容
主题切换最容易出现一种假完成：外层工具栏变黑了，文档区域、搜索浮层或具体 renderer 仍然停在浅色。
这轮继续统一了 light、dark、auto 三种主题的传递方式，并补了工具栏、代码文本、OFD 等链路的验证。宿主系统切换主题时，预览器可以跟随变化，同时保留文档本身需要的可读对比度。
4. 文件列表可以直接生成“首屏缩略图”
附件中心和知识库还有一个常见问题：列表里如果只有文件名，用户很难快速判断内容；但为了缩略图逐个完整打开文件，又会浪费时间和内存。
2.1.27 新增了独立的 @file-viewer/thumbnail。它会优先复用 EPUB、OOXML、OpenDocument、XMind 等文件内嵌的封面或缩略图；没有内嵌图时，再走 renderer 原生输出或首页捕获。批量任务有固定并发，流式模式可以边生成边上传，不会把所有 Blob 一起堆在内存里。
pnpm add @file-viewer/thumbnail @file-viewer/preset-allimport { createFileViewerThumbnailGenerator } from '@file-viewer/thumbnail'
import allPreset from '@file-viewer/preset-all'const generator = createFileViewerThumbnailGenerator({viewerOptions: { preset: allPreset },concurrency: 2,
})const result = await generator.generate({ file, filename: file.name },{ width: 320, height: 240, format: 'webp' },
)await upload(result.blob)
await generator.destroy()这项能力更适合文件柜、素材库和附件检索页：预览组件不只负责“点开后看”，也开始服务“打开前先判断”。
5. CBZ / CBR 不再按普通压缩包展示
CBZ 和 CBR 本质上是图片压缩包，但用户期待的是阅读器，而不是目录树。
现在这两类文件会自动进入漫画模式：图片按路径自然排序，打开时直接显示封面，并提供翻页、页码、方向键、PageUp/PageDown、Home/End、空格键和触摸滑动。解包仍然复用原来的 Worker、RAR/ZIP fallback、密码、缓存和体积限制，没有另起一套高风险逻辑。
这个改动也说明项目的方向正在变化：格式支持不能停在“识别扩展名”，还要尽量贴近用户对这种文件的真实操作方式。
接入仍然保持轻量
如果只是先在 Vue 3 项目里跑起来，可以直接使用 full 包：
pnpm add @file-viewer/vue3-full<script setup lang="ts">
import FileViewer from '@file-viewer/vue3-full'
</script><template><FileViewerurl="/files/report.docx":options="{ theme: 'auto' }"style="height: 720px"/>
</template>Vite 项目还可以让插件自动发现已安装的 preset，并复制 Worker、WASM、字体和 vendor 资源：
import { defineConfig } from 'vite'
import { fileViewerRenderers } from '@file-viewer/vite-plugin'export default defineConfig({plugins: [fileViewerRenderers({ copyAssets: true })],
})
这段进展意味着什么
从 2.1.23 到 2.1.27，变化不只是又多了几个格式名：
Office 预览开始补齐影响业务判断的图表内容。
大文件从“勉强打开”推进到可滚动、可搜索、可定位。
主题和工具栏继续跨 renderer 收口。
缩略图把能力延伸到了文件列表和素材管理。
CBZ / CBR 开始按内容类型提供更自然的阅读体验。
npm 资产复制、示例工程和公开发布校验也在继续加固。
项目当前仍覆盖 206 个扩展名、24 条预览链路，核心坚持浏览器端解析、按需加载和私有化部署。数字是范围，真正决定能不能进业务系统的，还是这些具体问题有没有被逐个处理。
项目地址：flyfish-dev/file-viewer
接下来会继续围绕真实文件样本，把 Office、PDF、OFD、CAD、压缩包和移动端这些高频链路做得更稳。