前端实现Blob下载功能，后端定义文件名（Content-Disposition问题与解决）

前端实现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));