file-viewer-demo/README.md

# 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>`标签，接下来您有两种方法进行文件切换。

1. **使用url控制切换（推荐）**

  这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。

2. **使用postMessage发送文件数据**

   这种方式适合本地上传或者后端返回流式二进制数据。

示例的`IframeViewer.vue`组件实现如下，该组件同时支持两种文件控制方式，您可以直接集成：

```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包。具体地址如下：

- [Vue2版本](https://www.npmjs.com/package/@flyfish-group/file-viewer)

- [Vue3版本](https://www.npmjs.com/package/@flyfish-group/file-viewer3)

您可以根据项目架构快速选用组件。

以下是示例代码：

`main.ts`

```typescript
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`

```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>

```