当前位置：首页 > VUE

vue实现header下载

2026-03-08 22:02:33VUE

Vue 实现文件下载的 Header 设置

在 Vue 中实现文件下载时，通常需要设置正确的 HTTP Header 以确保浏览器正确处理文件。以下是几种常见的方法：

使用 Axios 下载文件并设置 Header

通过 Axios 发起请求时，可以在配置中设置 responseType 和自定义 Header：

vue实现header下载

axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob', // 重要：指定响应类型为二进制数据
  headers: {
    'Authorization': 'Bearer your_token', // 示例：认证头
    'Custom-Header': 'value' // 其他自定义头
  }
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'filename.ext'); // 设置下载文件名
  document.body.appendChild(link);
  link.click();
  link.remove();
});

后端配合设置 Header

后端需要设置以下关键 Header 以确保浏览器触发下载：

vue实现header下载

Content-Disposition: attachment; filename="filename.ext"
Content-Type 对应文件类型（如 application/octet-stream）

使用 Fetch API 实现

fetch('/api/download', {
  headers: {
    'Authorization': 'Bearer your_token'
  }
})
.then(res => res.blob())
.then(blob => {
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'filename.ext';
  a.click();
  window.URL.revokeObjectURL(url);
});

直接通过 `<a>` 标签下载

对于不需要认证的简单下载，可以直接使用 HTML 标签：

<a href="/path/to/file" download="filename.ext">Download</a>

处理大文件下载

对于大文件，建议显示下载进度：

axios({
  url: '/api/large-file',
  method: 'GET',
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Downloaded: ${percent}%`);
  }
}).then(/* 处理下载 */);