vue对后端传来的文件（有pdf，word，表格，图片类型）进行判断之后点击进行不同类型文件的预览显示

为了实现对不同类型文件的判断和显示，可以在Vue组件中使用条件渲染，根据文件类型来选择不同的标签进行显示。

首先需要在组件中定义一个用于存储文件URL的变量，例如`fileUrl`。然后在组件的`mounted()`生命周期函数中，可以向后端发送请求获取文件URL并将其存储在`fileUrl`中。最后，在模板中使用条件渲染根据文件类型选择不同的标签进行显示。

以下是一个示例代码：

<template>
  <div>
    <div v-if="isImage">
      <img :src="fileUrl" alt="image" />
    </div>
    <div v-else-if="isPDF">
      <embed :src="fileUrl" type="application/pdf" width="100%" height="600px" />
    </div>
    <div v-else-if="isWord">
      <object :data="fileUrl" type="application/msword" width="100%" height="600px"></object>
    </div>
    <div v-else-if="isSpreadsheet">
      <object :data="fileUrl" type="application/vnd.ms-excel" width="100%" height="600px"></object>
    </div>
    <div v-else>
      文件类型暂不支持预览
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: '' // 存储文件URL
    }
  },
  mounted() {
    // 向后端发送请求获取文件URL并将其存储在fileUrl中
    // ...
  },
  computed: {
    isImage() {
      // 判断文件类型是否为图片
      const fileExtension = this.getFileExtension(this.fileUrl)
      return ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)
    },
    isPDF() {
      // 判断文件类型是否为PDF
      const fileExtension = this.getFileExtension(this.fileUrl)
      return fileExtension === 'pdf'
    },
    isWord() {
      // 判断文件类型是否为Word文档
      const fileExtension = this.getFileExtension(this.fileUrl)
      return ['doc', 'docx'].includes(fileExtension)
    },
    isSpreadsheet() {
      // 判断文件类型是否为表格
      const fileExtension = this.getFileExtension(this.fileUrl)
      return ['xls', 'xlsx'].includes(fileExtension)
    }
  },
  methods: {
    getFileExtension(fileUrl) {
      // 获取文件后缀名
      return fileUrl.split('.').pop().toLowerCase()
    }
  }
}
</script>

需要注意的是，以上代码只是一个示例，需要根据具体情况进行调整。同时，由于浏览器对文件类型的支持并不完全一致，有些文件可能无法在某些浏览器中正常显示，需要进行兼容性测试。