实现文件预览功能

可以使用微软提供的在线查看文档等功能：Office Online实现Office文档的在线查看,编辑等功能
用法如下：

<template>
    <a class="btns" @click.stop="preview(url)" target="_blank">
      预览
    </a>
</template>
<script>
export default {
    methods:{
        preview(url) {
          const typeList = [".pdf", ".html", "txt", "xml"];
          if (
            typeList.some((item) => {
              return url.includes(item);
            })
          ) {
            // 浏览器支持的文件之间用浏览器打开
            // 防止预览地址报错可以使用encodeURIComponent（）方法
            window.open(url, "_blank");
          } else {
            const wrUrl =
              "https://view.officeapps.live.com/op/view.aspx?src=" +
              encodeURIComponent(url);
            window.open(wrUrl);
          }
    },
}
</script>
// encodeURIComponent(外网地址)方法使用必须是端口地址，不能是ip地址，需要是外网地址，端口为80

使用微软提供的Office Online平台只需要一个网址即可在线查看Xls,doc,PPT等文档
http://view.officeapps.live.com/op/view.aspx?src=要查看的文档地址 

也可以单独封装成一个组件：

<template>
  <div class="preview">
    <!-- 预览 -->
    <el-dialog
      :title="`${previewData.fileName || '文件预览'}`"
      :visible.sync="previewData.show"
      fullscreen
      :show-close="false"
    >
      <div
        class="img-preview"
        v-if="
          previewData.fileSuffix == 'jpg' ||
            previewData.fileSuffix == 'jpeg' ||
            previewData.fileSuffix == 'png'
        "
      >
        <el-image
          :src="previewData.fileAllPath"
          :preview-src-list="[previewData.fileAllPath]"
        >
        </el-image>
      </div>
      <iframe
        v-else-if="previewData.fileSuffix == 'pdf' && previewData.show"
        :src="`${previewData.fileAllPath}`"
        style="height: calc(100vh - 80px);"
        width="100%"
        frameborder="0"
        scrolling="0"
        ref="pdfYl"
      >
      </iframe>
      <iframe
        v-else-if="
          previewData.fileSuffix == 'doc' ||
            previewData.fileSuffix == 'docx' ||
            previewData.fileSuffix == 'xls' ||
            previewData.fileSuffix == 'xlsx'
        "
        :src="
          `https://view.officeapps.live.com/op/view.aspx?src=${previewData.fileAllPath}`
        "
        width="100%"
        style="height: calc(100vh - 80px);"
        frameborder="0"
        scrolling="0"
      >
      </iframe>
      <el-button class="cancel" @click="previewData.show = false">
        取 消
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
import downLoadBold from '@/utils/downLoadBlod'
import printJS from 'print-js'
export default {
  name: '',
  components: {},
  props: {
    previewData: Object
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {
    down() {
      downLoadBold(
        { path: this.previewData.filePath },
        'get',
        this.previewData.fileName,
        this.previewData.fileSuffix.replace('.', '')
      )
    },
    print() {
      printJS(this.previewData.fileAllPath, 'image')
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
}
</script>

<style lang="scss" scoped>
.preview {
  ::v-deep {
    .el-dialog {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
  .preview-body {
    height: calc(100vh - 65px);
  }
  .down {
    position: absolute;
    right: 100px;
    top: 13px;
  }
  .print {
    position: absolute;
    right: 195px;
    top: 13px;
  }
  .cancel {
    position: absolute;
    right: 15px;
    top: 13px;
  }
  .img-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    // background: #fff;
    height: calc(100vh - 110px);
    padding: 20px;
    width: 96%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: auto;
  }
}
</style>