feat: vue2版本示例,详细demo
This commit is contained in:
parent
01edf4c5a0
commit
14bc1951d3
180
README.md
180
README.md
|
@ -1,24 +1,172 @@
|
||||||
# file-view-demo-vue2
|
# FileViewer 项目Vue2 demo
|
||||||
|
|
||||||
|
本demo基于vue-cli+js+vue2.x构建,如果您需要vue3版本的demo,请前往main分支。
|
||||||
|
|
||||||
|
**适用于Vue2 + Webpack,本集成方法要求最低Webpack版本为5,也就是Vue Cli Service 5.0.0以上,当然,iframe集成没有任何限制**
|
||||||
|
|
||||||
|
> 注意,为了版本稳定性,在iframe集成的场景下,无论是vue2版本还是vue3版本,都建议使用file-viewer3以获得最佳性能。
|
||||||
|
|
||||||
|
|
||||||
|
## 方式一:iframe集成(推荐)
|
||||||
|
|
||||||
|
iframe集成是我们最推荐的集成方式,可以跳过所有的坑,为您的项目快速集成文件预览能力。
|
||||||
|
|
||||||
|
|
||||||
|
### 源码准备
|
||||||
|
下载我们的最新版本的file-viewer源码,然后执行`npm build build`,或者`yarn build`。
|
||||||
|
|
||||||
|
### 构建产物集成
|
||||||
|
然后将构建后的dist目录拷贝到您项目的public目录下。当然也可以放置到任何项目中。本demo只是演示。
|
||||||
|
|
||||||
|
如果您在公网,建议您使用我们的cdn:
|
||||||
|
|
||||||
|
https://viewer.flyfish.dev
|
||||||
|
|
||||||
|
以获得高效的访问。
|
||||||
|
|
||||||
|
如果您在内网,可以完全参照本demo进行实施。
|
||||||
|
|
||||||
|
### 添加iframe标签
|
||||||
|
您可以实现一个组件,内部包含一个`<iframe>`标签,接下来您有两种方法进行文件切换。
|
||||||
|
|
||||||
|
1. **使用url控制切换(推荐)**
|
||||||
|
|
||||||
|
这种方式是最便捷的实现方式,适合有文件链接的方案。如果你的文件是**流式传输**或者需要用于上传体验,则不适合该方案。
|
||||||
|
|
||||||
|
2. **使用postMessage发送文件数据**
|
||||||
|
|
||||||
|
这种方式适合本地上传或者后端返回流式二进制数据。
|
||||||
|
|
||||||
|
示例的`IframeViewer.vue`组件实现如下,该组件同时支持两种文件控制方式,您可以直接集成:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// 查看器的源,当前示例为本源,指定为location.origin即可
|
||||||
|
const viewerOrigin = location.origin;
|
||||||
|
|
||||||
|
// 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) {
|
||||||
|
// 直接拼接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);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.iframe-viewer {
|
||||||
|
height: calc(100vh - 2px);
|
||||||
|
width: 100%;
|
||||||
|
border: 0
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
## Project setup
|
|
||||||
```
|
|
||||||
yarn install
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
|
||||||
```
|
|
||||||
yarn serve
|
## 方式二: 使用仓库依赖集成
|
||||||
|
|
||||||
|
该方案适合有定制化需求,或者想要控制显示样式或者灵活控制渲染的开发需求。
|
||||||
|
|
||||||
|
为了您能够快速集成本项目,我们在中央仓库发布了我们的NPM包。具体地址如下:
|
||||||
|
|
||||||
|
- [Vue2版本](https://www.npmjs.com/package/@flyfish-group/file-viewer)
|
||||||
|
|
||||||
|
- [Vue3版本](https://www.npmjs.com/package/@flyfish-group/file-viewer3)
|
||||||
|
|
||||||
|
您可以根据项目架构快速选用组件。
|
||||||
|
|
||||||
|
以下是示例代码:
|
||||||
|
|
||||||
|
`main.js`
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Vue from 'vue'
|
||||||
|
import FileViewer from '@flyfish-group/file-viewer'
|
||||||
|
|
||||||
|
// 导入样式
|
||||||
|
import '@flyfish-group/file-viewer/dist/style.css'
|
||||||
|
|
||||||
|
Vue.use(FileViewer);
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
render: h => h(App),
|
||||||
|
}).$mount('#app')
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
`InnerViewer.vue`
|
||||||
```
|
|
||||||
yarn build
|
```vue
|
||||||
|
<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%;
|
||||||
|
height: calc(100vh - 2px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
需要注意的是,内置组件`file-viewer`支持使用data的方式传入文件的二进制数据,您可以自行从服务器拉取集成。以下是组件API。
|
||||||
```
|
|
||||||
yarn lint
|
| 属性名 | 类型 | 示例 | 属性描述 |
|
||||||
```
|
| ------ | --------------------------- | ---------------------------- | --------------------------------------------------------- |
|
||||||
|
| file | File \| Blob \| ArrayBuffer | new Blob(...) | 支持文件、二进制blob和arraybuffer数组缓存 |
|
||||||
|
| url | String | "https://flyfish.dev/1.docx" | 支持任意服务器文件url,需要支持跨域访问,即存在cors响应头 |
|
||||||
|
|
||||||
### Customize configuration
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@flyfish-group/file-viewer": "^1.0.4",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"vue": "^2.6.14"
|
"vue": "^2.6.14"
|
||||||
},
|
},
|
||||||
|
|
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,9 @@
|
||||||
|
.slide{position:relative;border:1px solid #333;border-radius:10px;overflow:hidden;margin-bottom:50px;margin-left:auto;margin-right:auto;z-index:100}.slide div.block{position:absolute;top:0;left:0;width:100%;line-height:1}.slide div.content,.slide div.diagram-content{display:flex;flex-direction:column}.slide div.content-rtl{display:flex;flex-direction:column;direction:rtl}.slide .pregraph-rtl{direction:rtl}.slide .pregraph-ltr{direction:ltr}.slide .pregraph-inherit{direction:inherit}.slide .slide-prgrph{width:100%}.slide .line-break-br:before{content:"\a";white-space:pre}.slide div.v-up{justify-content:flex-start}.slide div.v-mid{justify-content:center}.slide div.v-down{justify-content:flex-end}.slide div.h-left{justify-content:flex-start;align-items:flex-start;text-align:left}.slide div.h-left-rtl{justify-content:flex-end;align-items:flex-end;text-align:left}.slide div.h-mid{justify-content:center;align-items:center;text-align:center}.slide div.h-right{justify-content:flex-end;align-items:flex-end;text-align:right}.slide div.h-right-rtl{justify-content:flex-start;align-items:flex-start;text-align:right}.slide div.h-just,.slide div.h-dist{text-align:justify}.slide div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.slide div.up-center{justify-content:flex-start;align-items:center}.slide div.up-right{justify-content:flex-start;align-items:flex-end}.slide div.center-left{justify-content:center;align-items:flex-start;text-align:left}.slide div.center-center{justify-content:center;align-items:center}.slide div.center-right{justify-content:center;align-items:flex-end}.slide div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.slide div.down-center{justify-content:flex-end;align-items:center}.slide div.down-right{justify-content:flex-end;align-items:flex-end}.slide li.slide{margin:10px 0;font-size:18px}.slide table{position:absolute}.slide svg.drawing{position:absolute;overflow:visible}/*!
|
||||||
|
* Copyright (c) 2017 ~ present NAVER Corp.
|
||||||
|
* billboard.js project is licensed under the MIT license
|
||||||
|
*
|
||||||
|
* billboard.js, JavaScript chart library
|
||||||
|
* https://naver.github.io/billboard.js/
|
||||||
|
*
|
||||||
|
* @version 3.10.3
|
||||||
|
*/.bb-color-pattern{background-image:url(#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;)}.bb svg{font-size:12px;font-family:sans-serif,Arial,nanumgothic,Dotum;line-height:1}.bb path,.bb line{fill:none;stroke:#c4c4c4}.bb text,.bb .bb-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:#555;font-size:11px}.bb-legend-item-title,.bb-xgrid-focus,.bb-ygrid-focus,.bb-ygrid{shape-rendering:crispEdges}.bb-chart-arcs .bb-needle{fill:#000}.bb-axis{shape-rendering:crispEdges}.bb-axis-y text,.bb-axis-y2 text{fill:#737373}.bb-event-rects{fill-opacity:1!important}.bb-event-rects .bb-event-rect{fill:transparent}.bb-event-rects .bb-event-rect._active_{fill:#27c9030d}.tick._active_ text{fill:#00c83c!important}.bb-grid{pointer-events:none}.bb-grid line{stroke:#f1f1f1}.bb-xgrid-focus line,.bb-ygrid-focus line{stroke:#ddd}.bb-text.bb-empty{fill:#767676}.bb-line{stroke-width:1px}.bb-circle._expanded_{fill:#fff!important;stroke-width:2px;stroke:red}rect.bb-circle._expanded_,use.bb-circle._expanded_{stroke-width:1px}.bb-selected-circle{fill:#fff;stroke-width:2px}.bb-bar{stroke-width:0}.bb-bar._expanded_{fill-opacity:.75}.bb-candlestick{stroke-width:1px}.bb-candlestick._expanded_{fill-opacity:.75}.bb-target.bb-focused,.bb-circles.bb-focused{opacity:1}.bb-target.bb-focused path.bb-line,.bb-target.bb-focused path.bb-step,.bb-circles.bb-focused path.bb-line,.bb-circles.bb-focused path.bb-step{stroke-width:2px}.bb-target.bb-defocused,.bb-circles.bb-defocused{opacity:.3!important}.bb-target.bb-defocused .text-overlapping,.bb-circles.bb-defocused .text-overlapping{opacity:.05!important}.bb-region rect{fill:#4682b4;fill-opacity:.1}.bb-region.selected rect{fill:#27c903}.bb-zoom-brush,.bb-brush .extent{fill-opacity:.1}.bb-legend-item{-webkit-user-select:none;user-select:none}.bb-legend-item-hidden{opacity:.15}.bb-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.bb-title{font-size:14px}.bb-chart-treemaps rect{stroke:#fff;stroke-width:1px}.bb-tooltip-container{z-index:10;font-family:sans-serif,Arial,nanumgothic,Dotum;-webkit-user-select:none;user-select:none}.bb-tooltip{border-collapse:separate;border-spacing:0;empty-cells:show;border:1px solid #999;background-color:#fff;text-align:left;font-size:11px;white-space:nowrap}.bb-tooltip th{font-size:12px;padding:4px 8px;text-align:left;border-bottom:solid 1px #eee}.bb-tooltip td{padding:4px 6px;background-color:#fff}.bb-tooltip td:first-child{padding-left:8px}.bb-tooltip td:last-child{padding-right:8px}.bb-tooltip td>span,.bb-tooltip td>svg{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:5px;vertical-align:middle}.bb-tooltip td.value{border-left:1px solid transparent}.bb-tooltip .bb-tooltip-title{display:inline-block;color:#aaa;line-height:20px}.bb-tooltip .bb-tooltip-detail table{border-collapse:collapse;border-spacing:0}.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{font-size:11px;line-height:13px;padding:4px 0 3px;color:#444;text-align:left;font-weight:400}.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{padding-left:5px;font-weight:800;font-size:12px}.bb-area{stroke-width:0;opacity:.2}.bb-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}text.bb-chart-arcs-gauge-title{dominant-baseline:middle;font-size:2.7em}.bb-chart-arcs .bb-chart-arcs-background{fill:#e0e0e0;stroke:none}.bb-chart-arcs .bb-chart-arcs-gauge-unit{fill:#000;font-size:16px}.bb-chart-arcs .bb-chart-arcs-gauge-min,.bb-chart-arcs .bb-chart-arcs-gauge-max{fill:#777}.bb-chart-arcs .bb-chart-arcs-title{font-size:16px!important;fill:#000;font-weight:600}.bb-chart-arcs path.empty{fill:#eaeaea;stroke-width:0}.bb-chart-arcs .bb-levels circle{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-arcs .bb-levels text{fill:#848282}.bb-chart-arc .bb-gauge-value{fill:#000}.bb-chart-arc path{stroke:#fff}.bb-chart-arc rect{stroke:#fff;stroke-width:1}.bb-chart-arc text{fill:#fff;font-size:13px}.bb-chart-radars .bb-levels polygon{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-levels text{fill:#848282}.bb-chart-radars .bb-axis line{stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-axis text{font-size:1.15em;cursor:default}.bb-chart-radars .bb-shapes polygon{fill-opacity:.2;stroke-width:1px}.bb-button{position:absolute;top:10px;right:10px}.bb-button .bb-zoom-reset{border:solid 1px #ccc;background-color:#fff;padding:5px;border-radius:5px;cursor:pointer}.pptx-wrapper[data-v-1b0d57cb]{max-width:100%;margin:0 auto}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1 @@
|
||||||
|
function r(o){throw new Error('Could not dynamically require "'+o+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}export{r as c};
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1 @@
|
||||||
|
.banner[data-v-3f8fdb10]{overflow:auto;text-align:center;background-color:#12b6ff;color:#fff}.viewport[data-v-3f8fdb10]{border:1px solid #ccc;margin:5px;width:calc(100% - 12px);height:calc(100vh - 73px)}.hidden .banner[data-v-3f8fdb10]{display:none}.hidden .viewport[data-v-3f8fdb10]{height:100vh!important}.hidden .well[data-v-3f8fdb10]{height:calc(100vh - 12px)}.overlay[data-v-3f8fdb10]{position:absolute;transition:all;z-index:1000;opacity:.4;top:50px;left:112px;padding:20px;border-radius:5px;background:white;border:1px solid silver}.overlay[data-v-3f8fdb10]:hover{opacity:1}.file-select[data-v-3f8fdb10]{position:absolute;left:5%;line-height:35px;margin-left:20px}.banner a[data-v-3f8fdb10]{color:#fff;text-decoration:none}.banner h1[data-v-3f8fdb10]{font-size:20px;line-height:2;margin:.5em 0}.file-select button[data-v-3f8fdb10]{background:#fafafa}.overlay button[data-v-3f8fdb10]{background:#12b6ff;color:#fff}button[data-v-3f8fdb10]{outline:none;border-radius:20px;border:1px solid #e3e3e3;line-height:19px;padding:5px 12px;cursor:pointer}.overlay input[type=text][data-v-3f8fdb10]{line-height:19px;height:30px;width:300px;outline:none;border:1px solid silver;border-radius:6px;margin-right:10px}.overlay input[type=file][data-v-3f8fdb10]{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;z-index:2;cursor:pointer}.upload-cover[data-v-3f8fdb10]{z-index:1;pointer-events:none;color:#000}.messages .warning[data-v-3f8fdb10]{color:#c60}html{overflow-y:scroll;font-family:helvetica,arial,sans-serif}body{margin:0;padding:0}#app{width:100%;height:100%}#app{width:100%;font-weight:400}.code-area[data-v-3be501eb]{display:block;margin:0 auto;font-size:12px;width:1000px;min-height:500px;background:#1f1f1f;word-break:break-word;white-space:break-spaces;color:#5af117}.file-viewer[data-v-4732f9f2]{position:relative;width:100%;height:100%}.content[data-v-4732f9f2]{display:block;background-color:#f2f2f2;width:100%;height:100%;overflow:auto}.loading[data-v-4732f9f2]{text-align:center;padding-top:50px}.name[data-v-4732f9f2]{position:absolute;bottom:0;left:0;width:100%;padding:13px 0;font-size:20px;text-shadow:2px 2px #616161;pointer-events:none;color:#fff;background:rgba(31,31,31,.22);text-align:center;z-index:10000}.file-render{width:100%;height:100%}
|
File diff suppressed because one or more lines are too long
Binary file not shown.
After Width: | Height: | Size: 47 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1 @@
|
||||||
|
var s=Object.defineProperty;var t=(e,r,o)=>r in e?s(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o;var l=(e,r,o)=>(t(e,typeof r!="symbol"?r+"":r,o),o);const n="/node_modules/@flyfish-group/file-viewer3/dist/worker/";class u{constructor(r){l(this,"worker",null);this.worker=r}defaults(r){return this.worker||r()}}function i(e,r=!1){let o=null;return`${n}${e}`,new u(o)}export{i as r};
|
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
|
@ -0,0 +1,15 @@
|
||||||
|
<!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>File Viewer在线预览器vue3.0版本</title>
|
||||||
|
<script type="module" crossorigin src="./assets/index-be50c070.js"></script>
|
||||||
|
<link rel="stylesheet" href="./assets/index-b9d6ea81.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
Binary file not shown.
77
src/App.vue
77
src/App.vue
|
@ -1,28 +1,79 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<header>
|
||||||
<img alt="Vue logo" src="./assets/logo.png">
|
<div class="tool-bar">
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
<div>
|
||||||
|
<h3>选择预览模式</h3>
|
||||||
|
<input type="radio" name="mode" value="inner" v-model="mode" />内置访问
|
||||||
|
<input type="radio" name="mode" value="embedded" v-model="mode" />iframe访问
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>选择文档</h3>
|
||||||
|
<select v-model="url">
|
||||||
|
<optgroup label="excel">
|
||||||
|
<option :value="excel">常规excel</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="pdf">
|
||||||
|
<option :value="pdf1">复杂pdf</option>
|
||||||
|
<option :value="pdf2">简单pdf</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wrapper">
|
||||||
|
<InnerViewer v-if="mode === 'inner'" :url="url" />
|
||||||
|
<IframeViewer v-else-if="mode === 'embedded'" :url="url" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
import InnerViewer from './components/InnerViewer'
|
||||||
|
import IframeViewer from "./components/IframeViewer";
|
||||||
|
|
||||||
|
// 测试文件,这些文件实际情况可能是其他服务器链接
|
||||||
|
const excel = 'excel.xlsx';
|
||||||
|
const pdf1 = '666.pdf';
|
||||||
|
const pdf2 = '888.pdf';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
url: excel,
|
||||||
|
mode: 'inner',
|
||||||
|
excel,
|
||||||
|
pdf1,
|
||||||
|
pdf2,
|
||||||
|
}
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
HelloWorld
|
InnerViewer,
|
||||||
|
IframeViewer
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
#app {
|
header {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
line-height: 1.5;
|
||||||
-webkit-font-smoothing: antialiased;
|
}
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
.tool-bar {
|
||||||
color: #2c3e50;
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
margin-top: 60px;
|
width: 230px;
|
||||||
|
height: 100vh;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .wrapper {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,58 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<iframe title="文档预览" ref="frame" :src="src" class="iframe-viewer"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// 查看器的源,当前示例为本源,指定为location.origin即可
|
||||||
|
const viewerOrigin = location.origin;
|
||||||
|
|
||||||
|
// 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) {
|
||||||
|
// 直接拼接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);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.iframe-viewer {
|
||||||
|
height: calc(100vh - 2px);
|
||||||
|
width: 100%;
|
||||||
|
border: 0
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,21 @@
|
||||||
|
<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%;
|
||||||
|
height: calc(100vh - 2px);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,8 +1,14 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.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.config.productionTip = false
|
||||||
|
|
||||||
|
Vue.use(FileViewer);
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
render: h => h(App),
|
render: h => h(App),
|
||||||
}).$mount('#app')
|
}).$mount('#app')
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
const { defineConfig } = require('@vue/cli-service')
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
|
// 我们使用根节点,如果使用其他子目录,请设置具体的路径映射
|
||||||
|
publicPath: '/',
|
||||||
|
// 默认转换依赖
|
||||||
transpileDependencies: true
|
transpileDependencies: true
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue