vue实现文件预览功能

要实现文件预览功能，你可以使用 Vue.js 结合一些第三方库来完成。以下是一个简单的示例，演示如何使用 Vue 和 FileSaver.js 实现文件预览和下载功能。

首先，你需要在你的项目中安装 Vue 和 FileSaver.js：

npm install vue filesaver

然后，在你的 Vue 组件中，你可以创建一个简单的文件上传和预览的示例：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="downloadFile">下载文件</button>
    <div v-if="fileUrl">
      <img v-if="isImage" :src="fileUrl" alt="文件预览" />
      <embed v-else :src="fileUrl" type="application/pdf" width="100%" height="500px" />
    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      file: null,
      fileUrl: '',
      isImage: false,
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.fileUrl = URL.createObjectURL(this.file);
      this.isImage = this.file.type.startsWith('image/');
    },
    downloadFile() {
      saveAs(this.file, this.file.name);
    },
  },
};
</script>

在上述示例中，我们通过使用 `<input type="file">` 元素来实现文件上传功能，当用户选择文件后，会触发 `handleFileChange` 方法。在该方法中，我们使用 `URL.createObjectURL` 创建一个用于预览的 URL，并根据文件类型判断是否是图片。

当用户点击 "下载文件" 按钮时，会触发 `downloadFile` 方法，该方法使用 FileSaver.js 的 `saveAs` 函数来实现文件下载功能。

注意，上述示例中只支持图片和 PDF 文件的预览，如果你需要支持其他类型的文件预览，你需要根据具体的文件类型使用不同的方式进行处理。

希望这个示例对你有帮助！