移动端vue使用kkfilrview线上预览文件

最新推荐文章于 2026-03-25 01:34:36 发布

原创最新推荐文章于 2026-03-25 01:34:36 发布 · 6.5k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

开箱即用专栏收录该内容

13 篇文章

订阅专栏

本文档详细介绍了如何配置kkFileView以实现在https://file.keking.cn上进行文件预览。首先，在nginx中设置反向代理，然后修改kkFileView的配置文件，包括`server.context-path`和`base.url`。接着，展示了项目的前端代码，包括路由配置、预览组件（PreviewFrame.vue）的实现。通过点击事件触发预览，利用kkFileView的在线预览功能，确保文件预览功能正常运行。

需求：

点击文件名称，跳转预览页面
支持文件类型：
在这里插入图片描述
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>