项目中前端下载一般分为两种情况：
后端直接提供一个文件地址，通过浏览器打开就可以下载。需要发送请求，后端返回二进制流数据，前端解析流数据，生成URL实现下载。前端对应的实质是a标签和Blob文件下载，这两者的区别：
a标签：txt、png、jpg、gif等文件，是不提供直接下载，有兼容性问题，特别是IE。
blob：利用 Blob对象可以将文件流转化成 Blob二进制对象。该对象兼容性良好，适用于需要动态生成或处理非同源文件的情况。通过URL.createObjectURL()方法将Blob对象转换为一个临时的URL下载。
blob对象
Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream来用于数据操作。Blob对象是html5新增的对象，它的作用是用来存储二进制数据的，比如图片、视频、音频等，
属性
size：只读属性，Blob中的字节数。type：只读属性，表示Blob存放的媒体类型，图片、视频、文本文件等等。它的使用方法如下：blob对象
Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream来用于数据操作。Blob对象是html5新增的对象，它的作用是用来存储二进制数据的，比如图片、视频、音频等，
属性
size：只读属性，Blob中的字节数。type：只读属性，表示Blob存放的媒体类型，图片、视频、文本文件等等。它的使用方法如下：
const blob = new Blob([], { type: '' });URL.createObjectURL
URL.createObjectURL()静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示指定的File对象或Blob对象。
当我们的document被销毁后，这个URL就会失效，所以我们需要在合适的时机销毁它。
简单说这个方法用来创建一个url的，它的作用是把一个blob对象转换成一个url，这个url可以用来下载文件，也可以用来预览文件。
// 创建下载的链接const url = URL.createObjectURL(blob);// 释放掉blob对象URL.revokeObjectURL(url);传统a标签下载
const a = document.createElement('a'); // 创建a标签a.style = 'display: none';a.download = filename''; // 设置下载文件名a.href = url; // 设置下载地址document.body.appendChild(a);a.click(); // 触发a标签的click事件document.body.removeChild(a);这种方式无法解决浏览器可识别文件直接打开的问题，但是 HTML5 新属性 download 属性会解决这个问题。
a标签 + download属性
当URL是同源（同域名、同协议、同端口号）时，这种情况用 a标签加download属性的方式即可，download属性指示浏览器该下载而不是打开该文件，同时该属性值即下载时的文件名；
<a href="path/to/file.jpg" download='file.jpg'>点击下载图片</a>const a = document.createElement('a'); // 创建a标签const e = document.createEvent('MouseEvents'); // 创建鼠标事件对象e.initEvent('click', false, false); // 初始化事件对象a.href = url; // 设置下载地址a.download = filename || ''; // 设置下载文件名a.dispatchEvent(e);因为a标签下载只能下载同源的文件，如果是跨域的文件，这里包括图片、音视频等媒体文件，都是预览，也无法下载。
fetch发送请求
通过原生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); });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// 设置响应类型为 blobxhr.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; }})