移动端vue使用kkfilrview线上预览文件
需求:点击文件称,跳转预览页面支持文件类型:kkfilrview官网地址: https://kkfileview.keking.cn/zh-cn/docs/home.html例如nginx的访问地址为 https://file.keking.cn 想要使用 https://file.keking.cn/preview/来做预览,kkFileView部署在内网192.168.1.233服务器上,需要
·
需求:
点击文件名称,跳转预览页面
支持文件类型:
kkfilrview官网地址: https://kkfileview.keking.cn/zh-cn/docs/home.html
例如nginx的访问地址为 https://file.keking.cn 想要使用 https://file.keking.cn/preview/来做预览,kkFileView部署在内网192.168.1.233服务器上,需要在nginx中添加反向代理如下:
location /preview {
proxy_pass 192.168.1.233:8012;
}
修改kkFileView的配置文件如下两项
server.context-path = /preview
base.url = https://file.keking.cn/preview
前台代码:
- 文件名称所在文件
点击事件:@click="handlePreview(currentItem,'附件预览')"
methods: {
/**
* 附件预览
*/
handlePreview(file,type) {
if(file&& file.fileId) {
this.$router.push(`/filePreview/${file.fileId}/${type}`)
}
}
}
- router.config.js文件
{
path:'/filePreview/:paramsFileId/:type',
props:true,
name:'filePreview',
component:() => import('包地址/PreviewFrame')
meta:{
title:'附件预览',
keepAlive:false
}
}
- PreviewFrame.vue
<template>
<div>
<div>{{type}}</div>
<div
v-if="url"
class="full-content"
>
<iframe
class="full-iframe"
:src="url"
></iframe>
</div>
</div>
</template>
<script>
export default {
props:{
pramasFlieId:String,
type:String
},
data(){
return {
url: '',
downLoadUrl:''
}
},
mounted() {
if(thss.pramasFileId) {
this.getFile()
}
},
watch:{
paramsFileId(newValue,oldValue) {
if(newValue&&newValue !== oldValue) {
this.getFile()
}
}
},
updated() {
this.getFile()
},
methods:{
getFile() {
getFileById(this.pramasFileId).then(res => {
this.downLoadUrl = 'https://file.keking.cn'+'/api-file/' +res
this.url ='https://file.keking.cn/preview/onlinePreview?url='+encodeURLComponent(this.downLoadUrl)
}
}
}
}
</script>
<style lang="scss" scoped>
.full-content {
height:calc(100vh - 34px);
margin-bottom:-10px;
}
.full-iframe {
height:100%;
width:100%;
border-style:none;
}
</style>
这是项目中的写法,nginx及其他配置是参考的官网,如果有不对的地方,欢迎指出~
更多推荐
已为社区贡献4条内容
所有评论(0)