把文件预览做成产品工作台：File Viewer v2.2.2 的 5 个工程变化File Viewer v2.2.2

File Viewer v2.2.2 已经整理完成。

这次没有先追求一个更长的功能清单，而是把“开发环境能打开”继续推进到“真实项目能交付”：重做 Demo 工作台，补上旧 PPT 和工程模型，修复一批真实文件问题，并把 Worker/WASM/字体的版本一致性纳入发布门禁。

File Viewer v2.2.2 新工作台

当前公开矩阵为 208 个扩展名、25 条预览链路、54 个 npm 发布目标。下面只讲这次最值得前端工程师关注的五个变化。

1. Demo 从格式列表变成了文件工作台

新版把页面拆成三层：文件来源、文档操作和沉浸式预览画布。

新版工作台依次预览 DOCX、PPTX、DWG 与 STEP

主要交互包括：

点击当前文件名展开分组样例库；
本地保留最近打开记录；
明暗主题共用同一布局；
文档容器独立滚动，外层页面不溢出；
移动端把低频操作收进单一“更多”入口；
?url= 直达文件时首帧进入沉浸模式。

这不是给 Demo 换个壳。一个预览组件放进 OA、知识库或附件中心后，用户每天都会重复执行打开、搜索、缩放、下载和切换文件，外围体验同样是产品的一部分。

2. 二进制 `.ppt` 有了独立链路

历史 OA、课件库和归档系统里仍有大量 PowerPoint 97-2003 文件。

v2.2.2 的 @file-viewer/renderer-presentation 会把 .ppt 与 .pptx 分流：

.ppt 使用独立的 @file-viewer/ppt 运行时；
Worker 负责解析；
OffscreenCanvas/WASM 负责渲染；
CJK 字体和有界帧缓存随 Full 资产交付；
.pptx 继续走 @file-viewer/pptx 的 OOXML Worker 渐进解析。

格式识别不再只依赖文件名。Word 链路也会先看容器签名：误命名成 .doc 的 OOXML 文件仍能进入 DOCX renderer，真正的 CFB 二进制 DOC 才走旧格式解析。

3. STEP/IGES/BREP 在本地完成真实三角化

以前工程模型最容易停在“请先转换”。现在 STEP/STP、IGES/IGS 和 BREP 会按需加载随包交付的本地 OCCT Worker/WASM，在浏览器里生成 Three.js 网格。

能够保留的内容包括装配层级、实例、法线和面颜色；统一缩放、适配和暗色场景也进入浏览器回归。

这条链路的关键不是炫一个 3D 画布，而是工程文件不用先上传到公共转换服务，内网场景可以完成闭环。

新版样例库中的文档、表格、演示、CAD 与 3D 分类

4. 文本与 Office 修复开始覆盖真实脏数据

这轮处理了几类常见但很烦的问题：

CSV/TSV 自动识别 UTF-8 BOM、严格 UTF-8，并回退 GB18030/GBK；
可以用 spreadsheet.textEncoding 显式覆盖编码；
普通文本新增 text.lineNumbers；
大于 512 KiB 的 Markdown 不再默认退化成源码；
上传 PDF 渲染后下载不会再得到 0 字节；
复杂 DOCX 的 WPS/WPG、图片锚点、嵌套组变换和异常页眉页脚完成修复；
Web Component/Shadow DOM 下的 PPTX 样式、Worker 子路径和 PDF 居中缩放完成回归。

这里有一个刻意保留的边界：Excel 使用虚拟表格时会隐藏打印按钮，避免只打印当前视口却让用户误以为拿到了完整工作簿。

5. 完整安装必须包含同版本运行时资产

File Viewer 的组件、renderer 与私有化资产交付

先装组件：

pnpm add @file-viewer/vue3-full@2.2.2
pnpm add -D @file-viewer/vite-plugin@2.2.2

Vite 项目让插件自动复制运行时资源：

import { fileViewerRenderers } from '@file-viewer/vite-plugin'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    fileViewerRenderers({ copyAssets: true })
  ]
})

组件接入保持很轻：

<script setup lang="ts">
import FileViewer from '@file-viewer/vue3-full'
</script>

<template>
  <FileViewer url="/files/report.pdf" style="height: 720px" />
</template>

Webpack、Rspack、Rollup、Vue CLI、Umi 等非 Vite 项目使用同版本 CLI：

npx --no-install file-viewer-copy-assets ./public/file-viewer

如果静态目录不是默认位置，可以统一覆盖基址：

import { setDefaultFullAssetBaseUrl } from '@file-viewer/vue3-full'

setDefaultFullAssetBaseUrl('/static/file-viewer/')

完整资产包括 Archive、PDF、DOCX、Spreadsheet、PPT/PPTX、CAD、Typst、Draw.io、SQLite 等 Worker/WASM/字体/vendor 文件。它们可以完全托管在自己的网络中。

支持矩阵的数字应该怎么理解

File Viewer v2.2.2 支持矩阵

208 个扩展名来自 core registry 的不重复注册结果，不把错误页或普通下载兜底算作格式能力。每个扩展名必须落到明确 renderer；IFC、3DM 等尚未完整解析的格式会直接提示边界。

File Viewer 自研源码与组件包采用 Apache-2.0，完整发行物中的独立运行时和第三方依赖保留各自许可。我在维护这个项目，也欢迎大家用脱敏的真实文件来验证这套矩阵，尤其是旧 Office、复杂 DOCX、DWG/DWF 和压缩包。

把文件预览做成产品工作台：File Viewer v2.2.2 的 5 个工程变化