vue中支持txt,docx,xlsx,mp4格式文件预览(纯前端)

在Vue中，要实现纯前端预览txt, docx, xlsx, mp4格式文件，可以使用以下方法：

1. 对于txt, docx, xlsx，可以使用<iframe>或<object>标签嵌入文件内容进行预览。
2. 对于mp4视频文件，可以使用<video>标签进行预览。

以下是实现这些功能的示例代码：

<template>
  <div>
    <!-- TXT 文件预览 -->
    <iframe v-if="isTxt" :src="fileUrl" style="width: 100%; height: 500px;"></iframe>
 
    <!-- DOCX/XLSX 文件预览 -->
    <object v-if="isDocxOrXlsx" :data="fileUrl" style="width: 100%; height: 500px;">
      {{ fileAlt }}
    </object>
 
    <!-- MP4 视频文件预览 -->
    <video v-if="isMp4" :src="fileUrl" controls style="width: 100%;"></video>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      fileUrl: 'path_to_your_file',
      fileType: 'txt', // 可选值：txt, docx, xlsx, mp4
    };
  },
  computed: {
    isTxt() {
      return this.fileType === 'txt';
    },
    isDocxOrXlsx() {
      return this.fileType === 'docx' || this.fileType === 'xlsx';
    },
    isMp4() {
      return this.fileType === 'mp4';
    },
    fileAlt() {
      return 'Alternative text for browsers that do not support objects (like browsers on iOS).';
    }
  }
};
</script>

在这个例子中，fileUrl 是文件的URL，fileType 是文件的类型。根据文件类型，使用对应的标签进行展示。注意，对于DOCX和XLSX文件，某些浏览器可能不支持直接预览，而是会提示下载。对于MP4视频，<video> 标签提供了播放控制。

请确保文件URL是可访问的，并根据自己的需求调整样式。此外，对于DOCX和XLSX，可能需要使用第三方库（如SheetJS）来在前端实现文件内容的解析和展示，但这会超出简洁回答的范围。