当前位置：首页 > VUE

vue axios实现自动下载

2026-02-22 19:22:17VUE

使用 Vue 和 Axios 实现自动下载

在 Vue 项目中，通过 Axios 实现文件自动下载通常需要结合 Blob 对象和前端文件下载技术。以下是具体实现方法：

发送请求并处理响应

确保 Axios 配置 responseType 为 'blob'，以便正确处理二进制文件流：

axios.get('/api/download', {
  responseType: 'blob',
  params: { filename: 'example.pdf' }
}).then(response => {
  handleDownload(response.data, 'example.pdf');
});

创建下载链接

通过 URL.createObjectURL 将 Blob 数据转换为可下载的链接：

vue axios实现自动下载

function handleDownload(blobData, fileName) {
  const url = window.URL.createObjectURL(new Blob([blobData]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}

处理后端响应头

确保后端服务设置正确的响应头以触发浏览器下载：

Content-Type: application/octet-stream
Content-Disposition: attachment; filename="example.pdf"

Node.js 示例（Express）：

vue axios实现自动下载

res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('Content-Disposition', 'attachment; filename=example.pdf');
fs.createReadStream(filePath).pipe(res);

错误处理

添加错误处理逻辑应对网络或服务器问题：

axios.get('/api/download', {
  responseType: 'blob'
}).catch(error => {
  console.error('Download failed:', error);
  alert('文件下载失败，请重试');
});

进度提示（可选）

通过 Axios 的 onDownloadProgress 显示下载进度：

axios.get('/api/download', {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`下载进度: ${percent}%`);
  }
});

封装为可复用方法

将下载逻辑封装为 Vue 组件方法：

methods: {
  downloadFile(url, filename) {
    axios.get(url, {
      responseType: 'blob'
    }).then(response => {
      const blobUrl = URL.createObjectURL(response.data);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = blobUrl;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(blobUrl);
      }, 100);
    });
  }
}