1.0.0-alpha.17 • Published 8 months ago
gos-viewer v1.0.0-alpha.17
gos-viewer
一个支持多文件格式的web文件查看器
安装
npm install gos-viewer -S
或者
yarn add gos-viewer
快速上手
在 main.js
引入
import GosViewer from 'gos-viewer'
Vue.use(GosViewer)
在页面中使用 1. 模态框形式
<template>
<div>
<input
ref="file"
class="file-select"
type="file"
@change="handleChange"
/>
</div>
</template>
<script>
export default {
name: 'DemoPage',
data () {
return {
file: null
}
},
created () {
// 初始化文件查看器
this.$gosViewer.init()
// 监听关闭事件
this.$gosViewer.onWindowClose(() => {
// 重置文件表单
this.$refs.file.value = ''
})
},
methods: {
handleChange (e) {
// 获取选择的文件
const [file] = e.target.files
// 打开文件
this.$gosViewer.open({
data: file
})
}
}
}
</script>
- 嵌入模式(详见examples)
<script>
export default {
name: "TestEmbedMode",
data() {
return {
file: {
file: new File(["666"], "index.txt", {
type: "text/plain",
}), // 文件
type: "text", // 打开类型
},
};
},
};
</script>
<template>
<div>
<gos-viewer
ref="gosViewer"
width="1200px"
height="800px"
v-model="file"
style="border: 1px solid #ddd"
></gos-viewer>
</div>
</template>
1.0.0-alpha.17
8 months ago
1.0.0-alpha.16
8 months ago
1.0.0-alpha.15
8 months ago
1.0.0-alpha.14
8 months ago
1.0.0-alpha.13
8 months ago
1.0.0-alpha.12
8 months ago
1.0.0-alpha.11
8 months ago
1.0.0-alpha.10
8 months ago
1.0.0-alpha.9
8 months ago
1.0.0-alpha.8
8 months ago
1.0.0-alpha.7
8 months ago
1.0.0-alpha.6
8 months ago
1.0.0-alpha.5
8 months ago
1.0.0-alpha.4
8 months ago
1.0.0-alpha.3
8 months ago
1.0.0-alpha.2
8 months ago
1.0.0-alpha.1
8 months ago