flyfish-group
/
file-viewer-demo
6
3
Fork 1
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: flyfish-group:v2
Branches Tags
flyfish-group:main
flyfish-group:viewer
flyfish-group:v2
flyfish-group:iframe
..
compare: flyfish-group:main
Branches Tags
flyfish-group:viewer
flyfish-group:main
flyfish-group:v2
flyfish-group:iframe

No commits in common. "v2" and "main" have entirely different histories.
v2 ... main

25 changed files with 11065 additions and 5757 deletions
Show Stats Expand all files Collapse all files

27
.gitignore vendored
View File

@ -1,21 +1,26 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.vscode
*.suo
*.ntvs*
*.njsproj

3
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

175
README.md
View File

@ -1,29 +1,23 @@
# FileViewer 项目Vue2 demo
# FileViewer 项目Vue3 demo
本demo基于vue-cli+js+vue2.x构建，如果您需要vue3版本的demo，请前往main分支。
**适用于Vue2 + Webpack，本集成方法要求最低Webpack版本为5，也就是Vue Cli Service 5.0.0以上，当然，iframe集成没有任何限制**
本demo基于vite+ts+vue3构建，如果您需要vue2版本的demo，请拉取v2分支。
> 注意，为了版本稳定性，在iframe集成的场景下，无论是vue2版本还是vue3版本，都建议使用file-viewer3以获得最佳性能。
## 方式一：iframe集成（推荐）
iframe集成是我们最推荐的集成方式，可以跳过所有的坑，为您的项目快速集成文件预览能力。
### 源码准备
下载我们的最新版本的file-viewer源码，然后执行`npm build build`，或者`yarn build`。
下载我们的最新版本的file-viewer源码，然后执行`npm run build`，或者`yarn build`。
### 构建产物集成
然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
如果您在公网，建议您使用我们的cdn：
https://viewer.flyfish.dev
以获得高效的访问。
如果您在公网，建议您使用我们的cdn：https://viewer.flyfish.dev，以获得高效的访问。
如果您在内网，可以完全参照本demo进行实施。
### 添加iframe标签
@ -31,7 +25,7 @@ https://viewer.flyfish.dev
1. **使用url控制切换（推荐）**
这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
这种方式是最便捷的实现方式，适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验，则不适合该方案。
2. **使用postMessage发送文件数据**
@ -40,65 +34,61 @@ https://viewer.flyfish.dev
示例的`IframeViewer.vue`组件实现如下，该组件同时支持两种文件控制方式，您可以直接集成：
```vue
<template>
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
</template>
<script setup lang="ts">
import {computed, nextTick, onMounted, ref} from "vue";
<script>
const props = defineProps<{
url?: string,
file?: File,
name?: string,
}>()
// 查看器的源，当前示例为本源，指定为location.origin即可
const viewerOrigin = location.origin;
// 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;
}
})
// iframe路径指向构建产物，这里是/，因为放在了public下面
// 如果使用cdn，请使用https://viewer.flyfish.dev
const source = '/dist/index.html'
// 发送文件数据
const sendFileData = () => {
nextTick(() => {
const viewer = frame.value;
if (!viewer || !props.file) return;
viewer.onload = () => viewer.contentWindow?.postMessage(props.file, viewerOrigin);
})
}
export default {
name: 'IframeViewer',
props: {
url: String,
file: File,
name: String,
},
mounted() {
this.sendFileData();
},
computed: {
// 构建完整url
src() {
// 文件名称，建议传递，提高体验性
const name = this.name || '';
if (this.url) {
// 直接拼接url
return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
} else if (this.file) {
// 直接拼接来源origin
return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
} else {
return source;
}
}
},
methods: {
// 发送文件数据
sendFileData() {
this.nextTick(() => {
// iframe引用
const viewer = this.$refs.frame;
if (!viewer || !this.file) return;
viewer.onload = () => viewer.contentWindow?.postMessage(this.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
}
.iframe-viewer {
height: calc(100vh - 2px);
width: 100%;
border: 0
}
</style>
```
@ -119,54 +109,41 @@ https://viewer.flyfish.dev
以下是示例代码：
`main.js`
`main.ts`
```javascript
import Vue from 'vue'
import FileViewer from '@flyfish-group/file-viewer'
```typescript
import { createApp } from 'vue'
import App from './App.vue'
import FileViewer from '@flyfish-group/file-viewer3'
// 导入样式
import '@flyfish-group/file-viewer/dist/style.css'
Vue.use(FileViewer);
new Vue({
render: h => h(App),
}).$mount('#app')
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>
<div class='simple-view'>
<file-viewer :url="url" />
</div>
</template>
<script>
export default {
name: 'InnerViewer',
props: {
url: String,
},
}
</script>
<style scoped>
.simple-view {
width: 100%;
height: calc(100vh - 2px);
}
.simple-view {
width: 100%;
height: calc(100vh - 2px);
}
</style>
```
需要注意的是，内置组件`file-viewer`支持使用data的方式传入文件的二进制数据，您可以自行从服务器拉取集成。以下是组件API。
| 属性名 | 类型 | 示例 | 属性描述 |
| ------ | --------------------------- | ---------------------------- | --------------------------------------------------------- |
| file | File \| Blob \| ArrayBuffer | new Blob(...) | 支持文件、二进制blob和arraybuffer数组缓存 |
| url | String | "https://flyfish.dev/1.docx" | 支持任意服务器文件url，需要支持跨域访问，即存在cors响应头 |

5
babel.config.js
View File

@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

1
env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FileViewer3集成示例</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

19
jsconfig.json
View File

@ -1,19 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

8617
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

54
package.json
View File

@ -1,44 +1,26 @@
{
"name": "file-view-demo-vue2",
"version": "0.1.0",
"name": "file-view-demo",
"version": "0.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"dev": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit"
},
"dependencies": {
"@flyfish-group/file-viewer": "^1.0.4",
"core-js": "^3.8.3",
"vue": "^2.6.14"
"@flyfish-group/file-viewer3": "^1.0.2",
"vue": "^3.2.47"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
"@types/node": "^18.14.2",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/tsconfig": "^0.1.3",
"npm-run-all": "^4.1.5",
"typescript": "~4.8.4",
"vite": "^4.1.4",
"vue-tsc": "^1.2.0"
}
}

17
public/index.html
View File

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

65
src/App.vue
View File

@ -1,3 +1,17 @@
<script setup lang="ts">
import {ref} from "vue";
import InnerViewer from './components/InnerViewer.vue'
import IframeViewer from "./components/IframeViewer.vue";
import excel from '@/assets/excel.xlsx?url'
import pdf1 from '@/assets/666.pdf?url'
import pdf2 from '@/assets/888.pdf?url'
// 预览的url
const url = ref<string>(excel);
// 提供inner和embedded
const mode = ref<string>('inner');
</script>
<template>
<header>
@ -27,53 +41,26 @@
</header>
</template>
<script>
import InnerViewer from './components/InnerViewer'
import IframeViewer from "./components/IframeViewer";
// 测试文件，这些文件实际情况可能是其他服务器链接
const excel = 'excel.xlsx';
const pdf1 = '666.pdf';
const pdf2 = '888.pdf';
export default {
name: 'App',
data() {
return {
url: excel,
mode: 'inner',
excel,
pdf1,
pdf2,
}
},
components: {
InnerViewer,
IframeViewer
}
}
</script>
<style scoped>
header {
line-height: 1.5;
line-height: 1.5;
}
.tool-bar {
background-color: hsla(160, 100%, 37%, 0.2);
width: 230px;
height: 100vh;
padding-left: 8px;
background-color: hsla(160, 100%, 37%, 0.2);
width: 230px;
height: 100vh;
padding-left: 8px;
}
@media (min-width: 1024px) {
header {
display: flex;
position: relative;
}
header {
display: flex;
position: relative;
}
header .wrapper {
flex: 1;
}
header .wrapper {
flex: 1;
}
}
</style>

0
public/666.pdf → src/assets/666.pdf
View File

0
public/888.pdf → src/assets/888.pdf
View File

0
public/excel.xlsx → src/assets/excel.xlsx
View File

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

1
src/assets/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

82
src/components/IframeViewer.vue
View File

@ -1,60 +1,56 @@
<template>
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
</template>
<script setup lang="ts">
import {computed, nextTick, onMounted, ref} from "vue";
<script>
// 查看器的源，当前示例为本源，指定为location.origin即可
const viewerOrigin = location.origin;
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'
export default {
name: 'IframeViewer',
props: {
url: String,
file: File,
name: String,
},
mounted() {
this.sendFileData();
},
computed: {
// 构建完整url
src() {
// 文件名称，建议传递，提高体验性
const name = this.name || '';
if (this.url) {
// 查看器的源，当前示例为本源，指定为location.origin即可
const viewerOrigin = location.origin;
// 构建完整url
const src = computed(() => {
// 文件名称，建议传递，提高体验性
const name = props.name || '';
if (props.url) {
// 直接拼接url
return `${source}?url=${encodeURIComponent(this.url)}&name=${encodeURIComponent(name)}`
} else if (this.file) {
return `${source}?url=${encodeURIComponent(props.url)}&name=${encodeURIComponent(name)}`
} else if (props.file) {
// 直接拼接来源origin
return `${source}?from=${encodeURIComponent(viewerOrigin)}&name=${encodeURIComponent(name)}`
} else {
} else {
return source;
}
}
},
methods: {
// 发送文件数据
sendFileData() {
this.nextTick(() => {
// iframe引用
const viewer = this.$refs.frame;
if (!viewer || !this.file) return;
viewer.onload = () => viewer.contentWindow?.postMessage(this.file, viewerOrigin);
})
}
}
})
// 发送文件数据
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
height: calc(100vh - 2px);
width: 100%;
border: 0
}
</style>

17
src/components/InnerViewer.vue
View File

@ -1,18 +1,17 @@
<script setup lang='ts'>
import {ref} from "vue";
defineProps<{
url: string
}>()
</script>
<template>
<div class='simple-view'>
<file-viewer :url="url" />
</div>
</template>
<script>
export default {
name: 'InnerViewer',
props: {
url: String,
},
}
</script>
<style scoped>
.simple-view {
width: 100%;

14
src/main.js
View File

@ -1,14 +0,0 @@
import Vue from 'vue'
import App from './App.vue'
import FileViewer from '@flyfish-group/file-viewer'
// 导入样式
import '@flyfish-group/file-viewer/dist/style.css'
Vue.config.productionTip = false
Vue.use(FileViewer);
new Vue({
render: h => h(App),
}).$mount('#app')

8
src/main.ts Normal file
View File

@ -0,0 +1,8 @@
import { createApp } from 'vue'
import App from './App.vue'
import FileViewer from '@flyfish-group/file-viewer3'
import './assets/main.css'
import '@flyfish-group/file-viewer3/dist/style.css'
createApp(App).use(FileViewer).mount('#app')

16
tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"references": [
{
"path": "./tsconfig.node.json"
}
]
}

8
tsconfig.node.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}

21
vite.config.ts Normal file
View File

@ -0,0 +1,21 @@
import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
base: './',
optimizeDeps: {
include: [
'./node_modules/@flyfish-group/file-viewer3/dist/components',
],
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

7
vue.config.js
View File

@ -1,7 +0,0 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 我们使用根节点，如果使用其他子目录，请设置具体的路径映射
publicPath: '/',
// 默认转换依赖
transpileDependencies: true
})

7652
yarn.lock
View File

File diff suppressed because it is too large Load Diff