使用微软方式实现文件预览

<template>
  <div>
    <a-button-group>
      <a-button v-for="file in fileList" :key="file.name" :disabled="file.type==='txt'" @click="viewFile(file)">{{file.name}}</a-button>
    </a-button-group>
    <div v-if="currentFile">
      <a-icon :type="fileIcon(currentFile.type)" />
      <a-button type="primary" @click="downloadFile(currentFile)">下载</a-button>
      <a-button type="primary" @click="showModal">预览</a-button>
      <a-modal v-model="previewVisible" :title="currentFile.name" :footer="null" @cancel="handleCancel">
        <div v-if="currentFile.type==='image'">
          <img :src="currentFile.url" style="max-width:100%;" />
        </div>
        <div v-else-if="currentFile.type==='word'">
          <iframe :src="`https://view.officeapps.live.com/op/embed.aspx?src=${currentFile.url}`" style="width:100%;height:600px;border:none;"></iframe>
        </div>
        <div v-else-if="currentFile.type==='pdf'">
          <iframe :src="`https://drive.google.com/viewerng/viewer?embedded=true&url=${currentFile.url}`" style="width:100%;height:600px;border:none;"></iframe>
        </div>
        <div v-else-if="currentFile.type==='excel'">
          <iframe :src="`https://view.officeapps.live.com/op/embed.aspx?src=${currentFile.url}`" style="width:100%;height:600px;border:none;"></iframe>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { Button, ButtonGroup, Icon, Modal } from 'ant-design-vue';

export default {
  components: {
    'a-button': Button,
    'a-button-group': ButtonGroup,
    'a-icon': Icon,
    'a-modal': Modal,
  },
  data() {
    return {
      fileList: [
        {
          name: '图片1.jpg',
          type: 'image',
          url: 'http://example.com/images/1.jpg',
        },
        {
          name: '文档1.docx',
          type: 'word',
          url: 'http://example.com/docs/1.docx',
        },
        {
          name: '文档2.pdf',
          type: 'pdf',
          url: 'http://example.com/docs/2.pdf',
        },
        {
          name: '表格1.xlsx',
          type: 'excel',
          url: 'http://example.com/docs/1.xlsx',
        },
        {
          name: '文本1.txt',
          type: 'txt',
          url: 'http://example.com/docs/1.txt',
        },
      ],
      currentFile: null,
      previewVisible: false,
    };
  },
  methods: {
    viewFile(file) {
      this.currentFile = file;
    },
    downloadFile(file) {
      window.location.href = file.url;
    },
    showModal() {
      this.previewVisible = true;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    fileIcon(type) {
      switch (type) {
        case 'image':
          return 'picture';
        case 'word':
          return 'file-word';
        case 'pdf':
          return 'file-pdf';
        case 'excel':
          return 'file-excel';
        case 'txt':
          return 'file-text';
        default:
          return 'file';
      }
    },
  },
};
</script>