File Viewer文档
ENGitHub2K+
File Viewer文档
File Viewer 开发文档

让文件留在浏览器，把预览能力交给产品。

从原生组件开始，按业务文件类型选择 renderer、preset 或 Full 包，并把所有运行时资源部署到自己的同源地址。

开始集成查看格式矩阵
推荐交付路径浏览器原生
  1. 01
    组件层Web · Vue · React · Svelte
  2. 02
    能力层Renderer · Preset · Full
  3. 03
    资源层Worker · WASM · Fonts
文件在本地完成解析与渲染同源、离线优先、可私有化
208
个已注册扩展名
25
条预览链路
100%
运行时资源可自托管
清晰入口

选择与你当前目标最接近的路径

5 分钟跑通从最短可运行示例开始，再逐步增加格式能力。选择原生组件Vanilla、Web Component、Vue、React、Svelte 与 jQuery。完成私有部署Worker、WASM、字体和 vendor 资源全部走本地同源路径。
推荐路径

五步完成集成

先跑通最小路径，再补充按需能力。每一步都对应真实的发布边界。

  1. 01选择原生组件包从 Web Component 开始，或使用你的框架组件。
  2. 02确定能力边界Full 包开箱即用；标准包按需组合 preset。
  3. 03发布离线资源Worker、WASM 与字体全部走本地同源路径。
  4. 04传入文件与选项支持 URL、File 与统一 options 契约。
  5. 05验证真实格式用你的 PDF、Office、CAD 与压缩包完成上线前验证。
pnpm add @file-viewer/web-full
<script type="module">
  import '@file-viewer/web-full'
</script>

<flyfish-file-viewer
  src="/files/report.pdf"
  style="height: 720px"
/>
查看完整集成指南
工程边界

上线前能逐项核验

不依赖服务端转码真实格式能力矩阵按需渲染与 Full 包并存静态 HTML 与原始 Markdown