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-all

import { 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 })],
})