快捷導(dǎo)航

vue如何在線預(yù)覽各類型文件

更新時間：2023年11月17日 10:44:33 作者：如果會御劍

這篇文章主要介紹了vue如何在線預(yù)覽各類型文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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

<template>
  <div :class="['dialog-box',isCollapse?'analysis-dialog':'analysis']">
    <el-dialog
      :title="`${file.title}文件預(yù)覽`"
      :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"
     >預(yù)覽</el-button>
</div>
<!-- 預(yù)覽文件 -->
    <preview-file :file="file" />
</div>
 
<script>
    export default {
        components: {
            PreviewFile: () => import('@/components/previewFile/index.vue')
      },
        data(){
            return{
                file: {
                    fileurl: '',
                    dialogVisible: false,
                    title: ''
                  }
            }
        },
        methods:{
             // 預(yù)覽
    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>