通过原生fetch请求，动态生成一个a标签实现文件下载。res.blob()该方法是Fetch API的response对象方法，该方法将后端返回的文件流转换为返回blob的Promise；blob(Binary Large Object)是一个二进制类型的对象，记录了原始数据信息。URL.createObjectURL(blob)该方法的返回值可以理解为一个指向传入参数对象的url可以通过该url访问参数传入的对象。

// 将url转成blob地址

fetch(url)

.then(res => res.blob())

.then(blob => {

const a = document.createElement('a');

// 将链接地址字符内容转变成blob地址

a.href = URL.createObjectURL(blob);

a.download = filename; // 下载文件的名字

document.body.appendChild(a);

a.click();

// 下载完成后 清除占用的缓存资源

window.URL.revokeObjectURL(a.href);

document.body.removeChild(a);

});

该方法需要注意的是，即便传入同一个对象作为参数，每次返回的url对象都是不同的。该url对象保存在内存中，只有在当前文档(document)被卸载时才会被清除，因此为了更好的性能，需要通过URL.revokeObjectURL(blobUrl)主动释放。

XMLHttpRequest

XMLHttpRequest（‌简称XHR）‌是一个用于创建服务器之间通信的Web API。‌在下载文件时，‌可以通过设置responseType为blob来接收二进制数据。‌这种方法适用于需要从服务器获取文件流并进行下载的场景。‌与Blob类似，‌XHR也可以用于动态生成文件并触发下载，‌但它在处理异步请求和数据传输方面提供了更多的灵活性。‌

可通过xhr.setRequestHeader设置请求头参数。可通过xhr.getResponseHeader(‘content-disposition’)获取头部参数。

let xhr = new XMLHttpRequest();

// GET请求，downloadURL请求路径url，async(是否异步)

xhr.open('GET', downloadURL, true);

// 设置请求头参数的方式,如果没有可忽略此行代码

xhr.setRequestHeader("Token", 'Bearer ' + getStorage().token); // token

// 设置响应类型为 blob

xhr.responseType = 'blob';

// 关键部分

xhr.onload = function () {

//如果请求执行成功

if (this.status === 200) {

// 下载文件

const blob = new Blob(this.response);

const href = window.URL.createObjectURL(blob); // 创建下载的链接

const a = document.createElement('a');

a.href = href;

a.download = fileName; // 下载文件名

document.body.appendChild(a);

a.click(); // 点击下载

document.body.removeChild(a); // 下载完成移除元素

window.URL.revokeObjectURL(href); // 释放掉blob对象

// 可通过xhr.getResponseHeader('content-disposition')头部参数，文件名等

// let headerParams = xhr.getResponseHeader('content-disposition')?.split(";") || [];

}

};

// 发送请求

xhr.send();

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

// 成功后操作

}

};

axios请求方式

axios({

method: method ||'post',

url,

responseType: 'blob',

headers: {

'Content-Type': 'application/json; charset=utf-8'

// 可在此处添加请求参数

token: 'token值'

}

data: JSON.stringify(params)

}).then(res => {

if (res) {

const blob = new Blob(res);

const url = window.URL.createObjectURL(blob)

const a = document.createElement('a')

a.style.display = 'none'

a.href = href;

a.download = fileName; // 下载文件名

document.body.appendChild(link)

link.click()

document.body.removeChild(link); // 下载完成移除元素

window.URL.revokeObjectURL(url); // 释放掉blob对象

} else {

message.error('下载失败')

return;

}

})

无论是通过fetch、XMLHttpRequest、axios请求，处理逻辑都是请求成功后，拿到相应的response，这个response就是我们要下载的内容，通过将它转成blob对象，通过URL.createObjectURL创建下载URL，通过a标签实现下载。