快速开始
Get Running Fast
如果你现在最想做的事情是“尽快看到效果”，这一页就是最快路径。 先选接入路线，再复制一段最小示例，十几分钟内你就能把预览器跑起来。
先选接入路线
| 方案 | 适合谁 | 优点 | 你应该看哪页 |
|---|---|---|---|
| Vue3 组件集成 | 单个 Vue 3 项目内直接使用 | 主推包线，在线 Demo 与生产上线均以 v3 为准 | Vue3 集成 |
| Vue2 组件集成 | Vue2.7 项目内直接使用 | 保留旧业务栈，体验与 v3 一致 | Vue2 集成 |
| Iframe 嵌入 | 多系统复用、异构系统、需要隔离依赖 | 升级集中、宿主系统更轻、适合平台化 | Iframe 嵌入 |
推荐经验: 如果你的业务系统不止一个，或者你不希望把解析依赖放进业务包里，直接走 iframe 方案通常更省心。
运行环境
- Node.js
>= 18 - 推荐使用
pnpm - 浏览器需要支持现代前端能力，建议优先在最新版 Chrome 或 Edge 中联调
Vue3 最短路径
1. 安装
bash
pnpm add @flyfish-group/file-viewer32. 注册插件
ts
import { createApp } from 'vue'
import App from './App.vue'
import FileViewer from '@flyfish-group/file-viewer3'
createApp(App).use(FileViewer).mount('#app')3. 放进页面
vue
<script setup lang="ts">
import { ref } from 'vue'
const url = ref('https://example.com/demo.docx')
</script>
<template>
<div style="height: 100vh">
<file-viewer :url="url" />
</div>
</template>Vue2 最短路径
Vue2.7 项目使用 @flyfish-group/file-viewer，能力与 Vue3 包保持一致:
bash
pnpm add @flyfish-group/file-viewerts
import Vue from 'vue'
import App from './App.vue'
import FileViewer from '@flyfish-group/file-viewer'
Vue.use(FileViewer)
new Vue({
render: h => h(App)
}).$mount('#app')完整步骤见 Vue2 集成。
Iframe 最短路径
如果你希望把预览器独立部署出来，最简单的 URL 方案可以直接这样挂载:
html
<iframe
src="https://viewer.flyfish.dev?url=https%3A%2F%2Fexample.com%2Fdemo.pdf"
style="width: 100%; height: 100%; border: 0"
></iframe>如果文件需要鉴权、签名 URL 或由宿主系统完成下载，请直接阅读 Iframe 嵌入，使用二进制推送方案。