Vue下载文件：多种类型和指定类型文件轻松搞定！

2023-10-16 20:19:55

轻松实现文件下载：使用Vue的全面指南

使用Vue下载文件

Vue提供了一种便捷的方式来下载文件，只需要使用v-bind:href指令，语法如下：

<a v-bind:href="fileURL" download>下载文件</a>

其中，fileURL是文件的URL，download属性用于指定下载的文件名。当用户点击该链接时，浏览器将自动下载该文件。

下载多种类型文件

如果需要下载多种类型文件，可以创建一个下载链接列表，每个链接对应一个文件。代码示例：

<template>
  <div>
    <a v-for="file in files" :href="file.url" download :key="file.name">{{ file.name }}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [
        { name: 'image.png', url: 'https://example.com/image.png' },
        { name: 'video.mp4', url: 'https://example.com/video.mp4' },
        { name: 'document.pdf', url: 'https://example.com/document.pdf' }
      ]
    }
  }
}
</script>

下载指定类型文件

如果需要下载指定类型文件，可以使用条件判断来过滤文件列表。代码示例：

<template>
  <div>
    <a v-for="file in files" v-if="file.type === 'image/png'" :href="file.url" download :key="file.name">{{ file.name }}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [
        { name: 'image.png', url: 'https://example.com/image.png', type: 'image/png' },
        { name: 'video.mp4', url: 'https://example.com/video.mp4', type: 'video/mp4' },
        { name: 'document.pdf', url: 'https://example.com/document.pdf', type: 'application/pdf' }
      ]
    }
  }
}
</script>