Open File Viewer
GitHub
开源文件预览 SDK

面向现代 Web 的文件预览基础设施

一个兼容原生 JavaScript、React、Vue 和 Svelte 的嵌入式文件预览器。把 PDF、Office、图片、音视频、压缩包、邮件、图纸、3D、GIS 和工程文件放进同一个稳定容器。

Get Started Live Demo Formats
Works seamlessly with
Native JS TypeScript React Vue Svelte
open-file-viewer.dev/preview
Search Zoom Rotate Download

Two ways to integrate

Use the ready-made viewer, or build your own.

Drop-in

OpenFileViewer Component

用内置 UI 快速上线，获得工具栏、主题、多文件队列、容器自适应和失败降级。

terminal
npm install @open-file-viewer/core
Composable

Plugin-first Core

通过插件协议接入自定义渲染器、WASM 或服务端转换结果，React/Vue/Svelte/原生 JS 共用同一核心。

viewer.ts
plugins: [pdfPlugin(), officePlugin(), customPlugin()]

Batteries included

PDF、Office、OFD、EPUB、XPS、图片、音视频、压缩包、邮件、CAD、GIS、3D 和文本插件开箱可用。

Framework agnostic

原生 JavaScript、React、Vue 和 Svelte 使用同一套 core 能力，方便团队跨产品复用。

Container-first

所有预览都在你的 DOM 容器内完成，支持尺寸变化、黑色模式、下载和错误边界。

Drop-in Integration

Add a viewer in minutes.

选择 Vanilla JS、React、Vue 或 Svelte。底层插件一致，UI 可以先用默认组件，再逐步定制。

Open File Viewer

Try it live

Drop files and preview them instantly.

本地文件只在浏览器内读取，不会上传。你也可以用内置示例体验 Markdown、JSON、SVG 和 DXF。

Format matrix

Built for real product attachments.

API Reference

A small API surface with room to extend.

核心 API 保持克制：容器、文件、插件、尺寸、主题和事件回调。复杂格式能力由插件扩展。

Frameworks

Vanilla JS、React、Vue、Svelte 的安装、接入方式和差异说明。

 PreviewOptions

文件源、队列、尺寸、主题、回调、降级和实例方法完整说明。

 Toolbar Customization

支持自定义文案、顺序、图标、审批/收藏/分享等业务按钮，也可以完全替换工具栏。

 Plugin Protocol

通过 match/render 协议扩展自定义格式、服务端转换结果或业务专属渲染器。

Ship file previews without building every renderer from scratch.

从一个稳定容器开始，让文件预览能力持续进化。

Try the playground