移动端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服务器上，需要在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及其他配置是参考的官网，如果有不对的地方，欢迎指出~