文件预览demo,提供两种方式的访问
.vscode | ||
public | ||
src | ||
.gitignore | ||
env.d.ts | ||
index.html | ||
package-lock.json | ||
package.json | ||
README.md | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts | ||
yarn.lock |
FileViewer 项目Vue3 demo
本demo基于vite+ts+vue3构建,如果您需要vue2版本的demo,请拉取v2分支。
注意,为了版本稳定性,在iframe集成的场景下,无论是vue2版本还是vue3版本,都建议使用file-viewer3以获得最佳性能。
方式一:iframe集成(推荐)
iframe集成是我们最推荐的集成方式,可以跳过所有的坑,为您的项目快速集成文件预览能力。
源码准备
下载我们的最新版本的file-viewer源码,然后执行npm run build
,或者yarn build
。
构建产物集成
然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
如果您在公网,建议您使用我们的cdn:https://viewer.flyfish.dev,以获得高效的访问。 如果您在内网,可以完全参照本demo进行实施。
添加iframe标签
您可以实现一个组件,内部包含一个<iframe>
标签,接下来您有两种方法进行文件切换。
- 使用url控制切换(推荐)
这种方式是最便捷的实现方式,适合有文件链接的方案。如果你的文件是流式传输或者需要用于上传体验,则不适合该方案。
-
使用postMessage发送文件数据
这种方式适合本地上传或者后端返回流式二进制数据。
示例的IframeViewer.vue
组件实现如下,该组件同时支持两种文件控制方式,您可以直接集成:
<script setup lang="ts">
import {computed, nextTick, onMounted, ref} from "vue";
const props = defineProps<{
url?: string,
file?: File,
name?: string,
}>()
// iframe引用
const frame = ref<HTMLIFrameElement>();
// iframe路径指向构建产物,这里是/,因为放在了public下面
// 如果使用cdn,请使用https://viewer.flyfish.dev
const source = '/dist/index.html'
// 查看器的源,当前示例为本源,指定为location.origin即可
const viewerOrigin = location.origin;
// 构建完整url
const src = computed(() => {
// 文件名称,建议传递,提高体验性
const name = props.name || '';
if (props.url) {
// 直接拼接url
return `${source}?url=${encodeURIComponent(props.url)}&name=${encodeURIComponent(name)}`
} else if (props.file) {
// 直接拼接来源origin
return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
} else {
return source;
}
})
// 发送文件数据
const sendFileData = () => {
nextTick(() => {
const viewer = frame.value;
if (!viewer || !props.file) return;
viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
})
}
onMounted(() => {
sendFileData();
})
</script>
<template>
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer" />
</template>
<style scoped>
.iframe-viewer {
height: calc(100vh - 2px);
width: 100%;
border: 0
}
</style>
方式二: 使用仓库依赖集成
该方案适合有定制化需求,或者想要控制显示样式或者灵活控制渲染的开发需求。
为了您能够快速集成本项目,我们在中央仓库发布了我们的NPM包。具体地址如下:
您可以根据项目架构快速选用组件。
以下是示例代码:
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import FileViewer from '@flyfish-group/file-viewer3'
import '@flyfish-group/file-viewer3/dist/style.css'
createApp(App).use(FileViewer).mount('#app')
InnerViewer.vue
<script setup lang='ts'>
import {ref} from "vue";
defineProps<{
url: string
}>()
</script>
<template>
<div class='simple-view'>
<file-viewer :url="url" />
</div>
</template>
<style scoped>
.simple-view {
width: 100%;
height: calc(100vh - 2px);
}
</style>