多格式支持
支持图片、视频、音频、PDF、Word、Excel、PowerPoint、Markdown 和代码文件等多种格式
React File Preview现代化的文件预览组件
支持图片、视频、音频、PDF、Office 文档、Markdown 和代码文件
Skip to content
高性能
基于 React 18 和现代浏览器 API，提供流畅的预览体验
可定制
支持自定义渲染器和主题，轻松适配你的应用风格
响应式设计
完美适配桌面和移动设备，提供一致的用户体验
易于集成
简单的 API 设计，几行代码即可集成到你的 React 应用
TypeScript 支持
完整的 TypeScript 类型定义，提供更好的开发体验
快速开始
安装
bash
pnpm add @eternalheart/react-file-previewbash
npm install @eternalheart/react-file-previewbash
yarn add @eternalheart/react-file-preview基础用法
tsx
import { FilePreviewModal } from '@eternalheart/react-file-preview'
import '@eternalheart/react-file-preview/style.css'
function App() {
const [isOpen, setIsOpen] = useState(false)
const files = [
{ url: 'https://example.com/document.pdf', name: 'document.pdf' }
]
return (
<>
<button onClick={() => setIsOpen(true)}>预览文件</button>
<FilePreviewModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
files={files}
currentIndex={0}
/>
</>
)
}支持的文件类型
- 图片: JPG, PNG, GIF, WebP, SVG, BMP, ICO
- 视频: MP4, WebM, OGG, MOV, AVI, MKV, M4V, 3GP, FLV
- 音频: MP3, WAV, OGG, M4A, AAC, FLAC
- 文档: PDF, Word (DOCX), Excel (XLSX), PowerPoint (PPT/PPTX), Outlook (MSG)
- 文本: Markdown, 代码文件 (支持语法高亮)