此文章是在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: {