File Viewer 文档

File Viewer：文件预览，全部在浏览器完成。

为了预览一份内部 DOCX 就上传服务器，糟透了。File Viewer 让 Office、PDF、CAD、压缩包、邮件等文件留在浏览器里。这里面向企业后台、内网和私有化系统，讲清真实接入路径、格式限制、离线资源和上线验证。

立即体验 Demo 查看格式矩阵进入快速开始

208扩展名映射

25预览链路

离线Worker / WASM / 字体自托管

按需preset 与 renderer 组合装配

File Viewer 中文浏览器原生 DOCX 预览工作区 — **208 个扩展名**25 条按需预览链路 · Worker、WASM、字体和 vendor 资源均可自托管

Platform Capability

不只是展示文件，而是把预览链路做成可交付的前端能力。

从格式识别、渲染调度、资源加载、用户交互到部署分发，File Viewer 以模块化架构把复杂预览能力拆成可控制、可验证、可持续升级的能力单元。

多格式高还原

覆盖真实业务附件

PDF、Word、Excel、PPT/PPTX、OFD、Typst、CAD、DWF、PSD、Mermaid、PlantUML、压缩包内嵌预览等能力按模块维护。

按需与性能

命中文件才加载重型依赖

renderer、worker、wasm、字体和 vendor 资源分层加载，IIFE full 入口也不会把全部能力压进首个脚本。

交互一致性

预览器级操作统一

搜索定位、缩放、打印、导出、下载、水印、工具栏权限和生命周期回调保持一致，减少业务侧重复适配。

样式隔离

宿主 CSS 不再轻易污染预览区

所有标准组件默认使用 Shadow DOM；主题定制使用 tokens 与 ::part()，仅旧版深层覆盖场景使用 styleIsolation:'none'。

企业化部署

公网、内网和离线都能落地

Worker/WASM/字体资源可自托管，支持 Docker、静态站点、Cloudflare Pages、Release 包和私有 CDN。

Live Experience

先体验真实文件，再决定装配哪些能力。

v2.2.5 Demo 使用沉浸式文档工作台：页面只让文档容器滚动，顶部来源胶囊和右侧工具组保持固定；每个操作打开自己的就近浮层，移动端则收敛为一个“更多”入口。

File Viewer v2.2.5 中文 Demo：特色 DOCX、PPTX、DWG 与可交互的三维 STEP 模型预览 — 最新中文 Demo 依次展示特色 DOCX、NASA PPTX、Autodesk DWG 与旋转 STEP 模型，同时保留文件胶囊融合和完整样例库交互。

主 Demo上传文件、粘贴链接或打开 208 个扩展名映射中的真实样例，并验证统一缩放与格式专项工具。文档比对左右并排预览、同步滚动、搜索定位和 PDF 工具栏隐藏。Demo 说明查看样例覆盖、部署边界和常见验证路径。

Install Strategy

先选组件，再选能力。避免把全量格式一次塞进业务页。

生产项目优先从轻量组件包开始，再按业务选择 preset 或单 renderer。preset-all 覆盖最完整，但体积最大，更适合完整文件工作台或内部验证环境。

轻附件

@file-viewer/preset-lite

图片、文本、Markdown、代码、媒体等常见轻量附件。

办公文档

@file-viewer/preset-office

PDF、Word、Excel、PowerPoint、OFD、RTF 和 OpenDocument 办公链路。

工程资料

@file-viewer/preset-engineering

CAD、EDA、3D、地理数据、绘图和结构化工程文件。

完整工作台

@file-viewer/preset-all

全格式体验与验收场景使用。业务端建议评估体量后再引入。

安装边界: 只安装 @file-viewer/vue3、@file-viewer/react 或 @file-viewer/web 是最轻的组件接入方式，但不会自动带入全部格式能力。需要预览文件时，请安装对应 preset 或 renderer。

Full 一包接入: 重度用户、内部附件中心或验收环境直接安装对应的 *-full 包。Full 已内置 preset-all，不要再安装或传入其它 preset。Vite 通过 fileViewerRenderers({ copyAssets:true }) 在开发和构建阶段自动发布同版本 Worker/WASM/字体/vendor 资源；非 Vite 项目运行 Full 包自带的同版本 CLI。

pnpm add @file-viewer/vue3-full
pnpm add -D @file-viewer/vite-plugin # Vite
# Webpack / Vue CLI / Rspack / Rollup / Umi
npx --no-install file-viewer-copy-assets ./public/file-viewer

script 标签页面完整部署 @file-viewer/web-full/dist/ 即可，目录已包含全量资产，无需复制。

Native Ecosystem

每个技术栈都有原生组件，不以 iframe 作为核心路径。

所有生态组件共享 core 能力、options、事件、搜索、缩放、打印、导出和生命周期钩子，同时保持各框架自己的接入方式。

Vanilla JS / Web Component原生标签或 mountViewer 命令式挂载，适合任意页面。Vue 3插件安装、组件 props、事件、ref/controller 和工具栏定制。Vue 2.7 / Vue 2.6兼容旧系统，保留与 Vue3 一致的参数模型。React / React LegacyHooks、refs、事件回调和 legacy React 项目接入。Svelte组件与 action 双路径，适合 SvelteKit 和轻应用。jQuery传统后台可用 $(el).fileViewer(options) 接入。

Format Matrix

208 个扩展名映射，由 25 条真实预览链路承接。

矩阵以代码中已注册的 renderer 为准。重型解析库、Worker、WASM 和离线 vendor 资源仅在命中文件类型时加载，不把“计划支持”混进当前能力。

OfficeDOCX / XLSX / PPT / PPTX / PDF / OFD / Typst

EngineeringDWG / DXF / DWF / 3D / GIS / EDA / OLB / DRA

KnowledgeMarkdown / Code / Git patch / Git bundle / Mermaid / PlantUML

AssetsPSD / Images / HEIC / Audio / Video / Fonts / SQLite / Parquet

ContainersZIP / RAR / 7Z / TAR / GZIP and nested preview

CollaborationEML / MSG / XMind / draw.io / Excalidraw / EPUB / UMD

查看完整格式矩阵查看格式完整度说明

Delivery

面向内网、私有化和开源分发的完整交付链路。

文档站、Demo、官网、npm 包、Docker 镜像、GitHub 开源总仓库和 Release 产物同步维护。需要更高还原度和极致性能的商业版，可从官网进入商业版说明与支持入口。

发布与分发 Docker 部署 GitHub