当前位置：首页 > VUE

vue实现header下载

2026-02-17 09:42:31VUE

Vue 实现文件下载的 Header 设置

在 Vue 中实现文件下载时，可以通过设置 HTTP 请求的 headers 来控制下载行为，例如指定文件名或授权信息。以下是几种常见的方法：

使用 `axios` 发起下载请求

通过 axios 发送请求时，可以在配置中设置 responseType 和 headers，以下载文件并指定文件名：

vue实现header下载

axios({
  method: 'get',
  url: '/api/download', // 替换为实际接口地址
  responseType: 'blob', // 关键：指定响应类型为二进制流
  headers: {
    'Authorization': 'Bearer your_token', // 可选：授权信息
    'Content-Type': 'application/octet-stream' // 可选：指定内容类型
  }
}).then(response => {
  // 创建下载链接
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;

  // 从响应头中获取文件名（需后端支持）
  const fileName = response.headers['content-disposition']
    ? response.headers['content-disposition'].split('filename=')[1]
    : 'default_filename.ext';

  link.setAttribute('download', fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

后端需配合的 Header 设置

后端应返回以下响应头以确保浏览器正确处理下载：

vue实现header下载

Content-Disposition: 指定文件名，例如：

Content-Disposition: attachment; filename="example.pdf"

Content-Type: 指定文件类型，例如：
```
Content-Type: application/pdf
```

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

如果文件是静态资源或无需鉴权，可直接通过 <a> 标签的 download 属性实现：

<a href="/path/to/file.pdf" download="custom_filename.pdf">下载文件</a>

使用 `fetch` 实现下载

类似 axios 的方案，通过 fetch 实现：

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