80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
|
|
<template>
|
|
<header>
|
|
<div class="tool-bar">
|
|
<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>
|
|
<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>
|
|
|
|
<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;
|
|
}
|
|
|
|
.tool-bar {
|
|
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 .wrapper {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|