vue在线预览各类型文件

此文章是在vue-admin-template后台上做的功能

1.新建组件previewFile => index.vue

<template>
  <div :class="['dialog-box',isCollapse?'analysis-dialog':'analysis']">
    <el-dialog
      :title="`${file.title}文件预览`"
      :visible.sync="file.dialogVisible"
      :before-close="handleClose"
      :width="isCollapse?'calc(100% - 54px)':'calc(100% - 238px)'"
      top="0"
    >
      <div>
        <iframe
          class="child"
          frameborder="0"
          :src="'http://view.xdocin.com/xdoc?_xdoc=' + file.fileurl"
          :style="{ height: height }"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    file: {
      type: Object,
      default: function() {
        return {
          fileurl: '',
          dialogVisible: false,
          title: ''
        }
      }
    }
  },
  data() {
    return {
      height: window.innerHeight - 120 + 'px',
      dialogVisible: false
    }
  },
    // 这里是用来判断左边菜单栏是否打开
  computed: {
    ...mapGetters(['sidebar']),
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  methods: {
    handleClose() {
      this.file.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.child {
  width: 100%;
  height: 100%;
  border: 0;
}
.dialog-box>>>.el-dialog__headerbtn{
  font-size: 34px;
}
.analysis>>>.el-dialog{
  left: 119px;
}
.analysis-dialog>>>.el-dialog{
  left: 27px;
}
</style>

上面用到vuex只是用来判断左边菜单栏是否打开，用来适配弹窗的宽度而已，如果不需要可以删除，不影响功能。

 

 

2.引用组件

<div>
    <div>
    <el-button
       size="mini"
       type="success"
        @click="handlepreview"
     >预览</el-button>
</div>
<!-- 预览文件 -->
    <preview-file :file="file" />
</div>

<script>
    export default {
        components: {
            PreviewFile: () => import('@/components/previewFile/index.vue')
      },
        data(){
            return{
                file: {
                    fileurl: '',
                    dialogVisible: false,
                    title: ''
                  }
            }
        },
        methods:{
             // 预览
    handlepreview() {
      // console.log(index, row)
        // 这里的id是传给后端接口的id，没有可以不传
      downtemplate({ id: row.id }).then(res => {
        this.file.fileurl = encodeURIComponent(res.data),//后端请求回来的文件地址url
        this.file.dialogVisible = true,//弹窗
        this.file.title = row.title,//文件名称
      })
    },
        }
    }
</script>