vue实现get下载

Vue 实现 GET 下载

使用 window.open 直接触发下载
适用于简单的 GET 请求下载，无需处理复杂逻辑。直接将文件 URL 通过 window.open 打开，浏览器会自动处理下载。

downloadFile() {
  const fileUrl = 'https://example.com/file.pdf';
  window.open(fileUrl, '_blank');
}

通过 axios 发送 GET 请求并处理二进制流
适用于需要添加请求头或处理后端返回的二进制流数据。

import axios from 'axios';

downloadFile() {
  axios({
    url: 'https://example.com/file.pdf',
    method: 'GET',
    responseType: 'blob', // 关键：指定响应类型为二进制流
    headers: {
      Authorization: 'Bearer your_token' // 可选：添加认证头
    }
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'filename.pdf'); // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url); // 释放内存
  });
}

处理动态文件名
若需从响应头中获取文件名（如后端通过 Content-Disposition 返回文件名）：

const fileName = response.headers['content-disposition']
  ? response.headers['content-disposition'].split('filename=')[1]
  : 'default.pdf';
link.setAttribute('download', fileName);

注意事项

• 跨域问题：确保后端配置了 CORS 允许前端域名访问。
• 大文件下载：建议分片下载或使用后端提供的断点续传接口。
• 错误处理：添加 catch 块处理网络或权限错误。

完整封装示例

async downloadFile(url, fileName = '') {
  try {
    const response = await axios({
      url,
      method: 'GET',
      responseType: 'blob'
    });
    const actualFileName = fileName || 
      response.headers['content-disposition']?.split('filename=')[1] || 
      'download';
    const blobUrl = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = actualFileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('Download failed:', error);
  }
}