当前位置：首页 > VUE

vue实现文件下载

2026-02-25 14:30:34VUE

Vue 实现文件下载的方法

在 Vue 中实现文件下载可以通过多种方式，以下是几种常见的方法：

使用 `<a>` 标签下载

通过动态创建 <a> 标签并设置 download 属性实现文件下载：

<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = '文件URL';
      link.download = '文件名.扩展名';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>

使用 Blob 对象下载

对于需要从后端 API 获取文件数据的情况，可以使用 Blob 对象：

<template>
  <button @click="downloadFromApi">从API下载</button>
</template>

<script>
export default {
  methods: {
    async downloadFromApi() {
      try {
        const response = await axios.get('API地址', {
          responseType: 'blob'
        });

        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.download = '文件名.扩展名';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

使用 FileSaver.js 库

FileSaver.js 是一个简化文件保存操作的库：

安装 FileSaver.js：
```
npm install file-saver
```

在 Vue 组件中使用：


<template>
<button @click="saveFile">使用FileSaver下载</button>
</template>

import { saveAs } from 'file-saver';

export default { methods: { saveFile() { const blob = new Blob(['文件内容'], { type: 'text/plain;charset=utf-8' }); saveAs(blob, '文件名.txt'); } } };

```

下载 Base64 编码文件

处理 Base64 编码的文件数据：

downloadBase64File(base64Data, fileName) {
  const link = document.createElement('a');
  link.href = `data:application/octet-stream;base64,${base64Data}`;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

处理大文件下载

对于大文件下载，可以显示下载进度：

vue实现文件下载

async downloadLargeFile() {
  try {
    const response = await axios.get('大文件URL', {
      responseType: 'blob',
      onDownloadProgress: progressEvent => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(`下载进度: ${percentCompleted}%`);
      }
    });

    // 处理下载完成的文件
    const url = window.URL.createObjectURL(new Blob([response.data]));
    // ...后续下载逻辑
  } catch (error) {
    console.error('大文件下载失败:', error);
  }
}

这些方法覆盖了 Vue 中实现文件下载的常见场景，可以根据具体需求选择合适的方式。