企业后台的附件预览通常会经历三个阶段先支持 PDF再拼接 Word、Excel、PPT 和图片最后被旧 Office、CAD、压缩包、大文件和内网部署击穿。File Viewer v2.2.2 的目标是让这些格式共享同一套组件 API并把重型 Worker、WASM、字体和 vendor 资源完整交付到自己的网络中。本文以 Vue 3 Vite 为例完成接入再说明非 Vite、子路径和私有化环境应该怎样部署。1. 先看新版工作台新版 Demo 重新整理了文件来源、操作工具和预览画布。样例库、最近打开、明暗主题、移动端“更多”入口和?url沉浸模式都在同一套布局中。支持矩阵当前包含208 个不重复扩展名25 条 renderer 预览链路54 个 npm 发布目标8 个官方 Full 入口Web、Vue 3、Vue 2.7、Vue 2.6、React、React legacy、Svelte、jQuery。2. Vue 3 Vite 完整接入2.1 安装同版本组件和插件pnpmaddfile-viewer/vue3-full2.2.2pnpmadd-Dfile-viewer/vite-plugin2.2.2Full 包包含完整 renderer 矩阵Vite 插件负责把对应版本的 Worker、WASM、字体和 vendor 文件发布到构建产物中。2.2 配置 Viteimport{fileViewerRenderers}fromfile-viewer/vite-pluginimportvuefromvitejs/plugin-vueimport{defineConfig}fromviteexportdefaultdefineConfig({plugins:[vue(),fileViewerRenderers({copyAssets:true})]})2.3 在页面中使用script setup langts import FileViewer from file-viewer/vue3-full /script template FileViewer url/files/contract.docx styleheight: 720px / /template2.4 鉴权接口返回二进制接口没有公开 URL 时可以先获取 Blob再补一个可信文件名constresponseawaitfetch(/api/files/42/download,{headers:{Authorization:Bearer${token}}})constblobawaitresponse.blob()constfilenewFile([blob],quarter-report.xlsx,{type:blob.type})文件名用于选择正确 renderer。不要把没有扩展名的下载接口地址直接当作类型依据。3. 非 Vite 项目怎样交付运行时资源Webpack、Rspack、Rollup、Vue CLI 和 Umi 项目需要执行 Full 包自带的同版本 CLInpx --no-install file-viewer-copy-assets ./public/file-viewer默认资源地址是部署基址/file-viewer/。如果业务使用其他静态目录可以统一覆盖import{setDefaultFullAssetBaseUrl}fromfile-viewer/vue3-fullsetDefaultFullAssetBaseUrl(/static/file-viewer/)需要一起部署的并不只有 JavaScript 入口还包括PDF、DOCX、Spreadsheet WorkerPPT/PPTX Worker、WASM 和 CJK 字体CAD/OCCT Worker 与 WASMTypst 编译器和字体Archive、Draw.io、SQLite 等 vendor 资源。只复制入口 IIFE 或只安装 renderer 代码不属于完整格式支持。4. 新支持矩阵怎样理解办公与版式DOC/DOCX、XLS/XLSX、PPT/PPTX、PDF、OFD、RTF、ODT、Typst 等格式分别进入对应 renderer。旧.ppt使用独立二进制链路不复用 PPTX 的 OOXML 解析。工程、模型与绘图DWG、DXF、DWF/DWFx、STEP/STP、IGES/IGS、BREP、GDS、XMind、draw.io、Mermaid 等能力按需加载 Worker/WASM/WebGL/SVG。STEP/IGES/BREP 会通过本地 OCCT Worker/WASM 完成真实三角化再生成 Three.js 网格不需要先调用公共转换服务。压缩包与邮件ZIP、7Z、RAR、TAR、ISO、APK、CBZ/CBR 等先展示目录用户点击内部文件后再按需解压并继续复用统一预览器。EML、MSG、MBOX 支持头信息、正文和附件查看。文本、媒体与数据资产代码、日志和大文本使用有界虚拟化CSV/TSV 自动识别 UTF-8、GBK、GB18030。图片、音视频、PSD、SQLite、Parquet、Avro、字体和 WASM 使用对应按需解析链路。5. v2.2.x 处理的生产问题上传 PDF 下载为 0 字节PDF.js 会把ArrayBuffer转移给 Worker。新版下载逻辑会回退到仍完整的原始File避免渲染成功后下载空文件。复杂 DOCX 锚点偏移file-viewer/docx升级到 0.3.21修复 WPS/WPG、图片锚点、嵌套组变换和页面/段落锚点混排造成的巨大空白。Shadow DOM 与子路径PPTX 样式会进入实际 ShadowRootWorker 不再固定请求根路径。PDF 在全宽、flex grow 和外层滚动容器中的居中缩放也完成修复。EPUB 依赖安全EPUB 引擎改为包内懒加载固定安全 XML DOM 版本并在发布时执行npm pack、全新安装、npm audit、manifest、哈希和许可证检查。6. 上线前检查清单组件、Vite 插件和运行时资产版本一致生产环境可以访问/file-viewer/或自定义资产基址.mjs返回application/javascriptNginx 没有用 HTML fallback 响应 Worker/WASM 文件鉴权二进制被包装为带可信文件名的File使用真实 DOCX、PPT、DWG、压缩包和大文件回归未完整支持的 IFC、3DM 等格式向用户显示真实边界Excel 虚拟表格不强行显示不完整的打印操作。结语File Viewer 自研源码与组件包采用 Apache-2.0完整发行物中的独立运行时和第三方依赖保留各自 LICENSE/NOTICE。v2.2.2 的重点不是简单累计扩展名而是让每个格式拥有明确 renderer、能力边界和可交付资源。GitHubhttps://github.com/flyfish-dev/file-viewerDemohttps://demo.file-viewer.app文档https://doc.file-viewer.app