前端实现Blob下载功能（Content-Disposition问题与解决）

一. 获取Content-Disposition问题与解决二. 请求示例1.使用xhr请求2.使用fetch请求3.使用axios请求

在Web应用中，我们经常需要实现文件的下载功能。有时，这个文件可能是用户上传的，有时则可能是服务器端生成的。不论哪种情况，我们都可以利用HTTP的 Content-Disposition头信息来设定下载时的文件名。下面，我们就来看看如何在前端实现这个功能。

在实现这个功能时，前端需要通过调用接口，并通过接口请求头中的鉴权，获取到后端设置的Content-Disposition中的文件名，然后将数据流BloB化，下面分别使用xhr请求，fetch请求，axios请求进行代码示例实现下载功能。

一. 获取Content-Disposition问题与解决

在某些情况下，您可能无法直接从HTTP响应中获取Content-Disposition头，例如在使用Axios库时。默认情况下，只有六种简单响应头（Simple Response Headers）会暴露给外部：Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma。

而Content-Disposition并不在此列表中，因此即使服务器发送了该头，客户端也无法直接访问到它。

要解决这个问题，您需要在服务器端设置响应头Access-Control-Expose-Headers，将其值设置为允许暴露Content-Disposition头。这样，当您使用Axios库发起请求时，就可以在响应中访问到Content-Disposition头了。

二. 请求示例

1.使用xhr请求

使用原生XMLHttpRequest是实现这个功能的一种方式。下面是一段示例代码：

const xhr = new XMLHttpRequest();xhr.open('get', url);xhr.responseType = 'Blob';xhr.setRequestHeader('Authorization', 'token'); // 权限验证，视情况修改xhr.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { const name = fileName || xhr.getResponseHeader('Content-Disposition').split('filename=')[1]; // 支持IE浏览器 if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(this.response, name); return; } const href = window.URL.createObjectURL(this.response); const link = document.createElement('a'); link.style.display = 'none'; link.href = href; link.setAttribute('download', name); document.body.appendChild(link); link.click(); document.body.removeChild(link); }};xhr.send();

这段代码创建了一个新的XMLHttpRequest对象，然后打开一个到指定文件路径的连接，设置了Content-Disposition头信息，并发送了请求。

2.使用fetch请求

另一种方式是使用fetch API。这是一个更现代、更易用的网络请求方式。下面是一段示例代码：

const headers = { };Object.assign(headers, { Authorization: `Bearer ${ token}`});fetch('/path/to/your/file', { method: 'GET', headers}).then(response => { let name = response.headers.get('Content-Disposition').split('filename=')[1]; name = decodeURIComponent(name); // 创建一个a标签并设置href为blob的URL，然后模拟点击a标签实现下载功能 const a = document.createElement('a'); a.href = URL.createObjectURL(response.blob()); a.download = name; // 后端设置的文件名 document.body.appendChild(a); a.click(); // 模拟点击a标签实现下载功能 document.body.removeChild(a); // 下载完毕后移除a标签}).catch(error => console.error(error));

这段代码首先使用fetch API发起一个请求，然后在响应返回后，将数据流转化为一个Blob对象，接着创建一个新的a标签，设置其href为Blob对象的URL，并将文件名设置为后端设置的文件名，最后模拟点击a标签实现下载功能。

3.使用axios请求

最后，我们还可以使用axios库。这是一个基于Promise的HTTP库，可以用于浏览器和node.js。下面是一段示例代码：

axios({ method: 'get', url: '/path/to/your/file', responseType: 'blob', fileName: 'yourfilename.ext' // 后端设置的文件名}).then(response => { const url = URL.createObjectURL(response.data); const a = document.createElement('a'); a.href = url; a.download = 'yourfilename.ext'; // 后端设置的文件名 document.body.appendChild(a); a.click(); document.body.removeChild(a);}).catch(error => console.error(error));