当前位置：首页 > VUE

vue实现文件下载功能

2026-02-24 09:19:00VUE

Vue 实现文件下载功能的方法

使用 `<a>` 标签下载

通过动态创建 <a> 标签实现文件下载，适用于已知文件 URL 的场景：

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = 'https://example.com/file.pdf';
      link.download = 'file.pdf';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

通过 Blob 对象下载

适用于需要从后端 API 获取二进制数据的场景：

<script>
export default {
  methods: {
    async downloadFile() {
      try {
        const response = await axios.get('/api/download', {
          responseType: 'blob'
        });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.download = 'filename.ext';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败', error);
      }
    }
  }
}
</script>

使用 FileSaver.js 库

FileSaver.js 提供了更简单的文件保存接口：

npm install file-saver

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

export default {
  methods: {
    downloadFile() {
      saveAs('https://example.com/file.pdf', 'custom-filename.pdf');
    }
  }
}
</script>

处理权限问题

某些浏览器可能阻止跨域下载，需要确保：

文件 URL 与网站同源
服务器配置正确的 CORS 头
对于用户生成内容，使用 Blob 方式更可靠

显示下载进度

对于大文件，可以添加进度提示：

vue实现文件下载功能

<script>
export default {
  data() {
    return {
      downloadProgress: 0
    };
  },
  methods: {
    async downloadLargeFile() {
      const response = await axios.get('/api/large-file', {
        responseType: 'blob',
        onDownloadProgress: progressEvent => {
          this.downloadProgress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      });
      // ...处理下载逻辑
    }
  }
}
</script>