vue 文件预览mptxt、pptx、xls、xlsx、docx、pdf、html、xml

在Vue中实现多种文件预览，可以使用第三方库，例如vue-pdf来预览PDF文件，vue-ppt来预览PPT文件，以及vue-excel和vue-doc来预览Excel和Word文件。对于简单的文本文件如TXT、HTML、XML，可以直接使用<iframe>或<pre>标签展示内容。

以下是一个简单的示例，展示如何在Vue中预览这些文件类型的一部分：

<template>
  <div>
    <file-viewer :file-type="fileType" :file-content="fileContent" />
  </div>
</template>
 
<script>
import FileViewer from './FileViewer.vue';
 
export default {
  components: {
    FileViewer
  },
  data() {
    return {
      fileType: 'txt', // 可以是 'pdf', 'pptx', 'xls', 'xlsx', 'docx', 'pdf', 'html', 'xml' 中的一个
      fileContent: '' // 文件内容，通常是Base64编码或者URL
    };
  }
};
</script>

FileViewer.vue 组件需要根据不同的文件类型使用适当的方法来展示内容。

对于PDF：

<template>
  <pdf :src="pdfSrc"></pdf>
</template>
 
<script>
import pdf from 'vue-pdf';
 
export default {
  components: {
    pdf
  },
  props: {
    src: {
      type: String,
      required: true
    }
  },
  computed: {
    pdfSrc() {
      // 处理PDF文件的Base64或者URL
      return this.src;
    }
  }
};
</script>

对于TXT、HTML和XML文件：

<template>
  <pre>{{ formattedContent }}</pre>
</template>
 
<script>
export default {
  props: {
    fileContent: {
      type: String,
      required: true
    },
    fileType: {
      type: String,
      required: true
    }
  },
  computed: {
    formattedContent() {
      // 根据文件类型进行处理，例如转换换行符，解码等
      if (this.fileType === 'txt' || this.fileType === 'html' || this.fileType === 'xml') {
        return this.fileContent.replace(/\n/g, '<br>');
      }
      return this.fileContent;
    }
  }
};
</script>

注意：实际应用中可能需要对文件内容进行进一步的处理，例如Base64解码，文件URL的处理，以及针对不同文件类型的特定预览库的配置。上述代码仅提供了基本框架，并假设fileContent是预览文件内容的Base64编码或者URL。对于复杂的文件类型，可能需要编写更多的逻辑来处理文件的加载和展示。