前端下载文件的几种方式

使用 location.href

// 适用于浏览器无法识别文件，如果是html、jpg、pdf等会直接解析展示，而不会下载
window.location.href = url 

使用 window.open

// 适用于浏览器无法识别文件，如果是html、jpg、pdf等会直接解析展示，而不会下载
window.open(url)

a 标签

// 适用于单文件下载或需要自定义文件名称//写法1constdownload=(filename, url)=>{let a = document.createElement('a'); 
    a.style ='display: none';// 创建一个隐藏的a标签
    a.download = filename;
    a.href = url;
    document.body.appendChild(a);
    a.click();// 触发a标签的click事件
    document.body.removeChild(a);}// 写法2< a href="/images/download.jpg" download="myFileName">

文件流

step1 发送请求，有两种方式

// 此种方式的优点是支持多文件下载、post下载、自定义文件名称，流程是向后端发送post请求，后端返回文件流，前端将文件流转成下载链接// 原生js请求写法（不可以使用JQuery，因为JQuery不支持blob类型）functiondownload(){const req =newXMLHttpRequest();
　　　　req.open('POST','/download/excel',true);
　　　　req.responseType ='blob';//如果不指定，下载后文件会打不开
　　　　req.setRequestHeader('Content-Type','application/json');
　　　　req.onload=function(){var content = req.getResponseHeader("Content-Disposition");// 文件名最好用后端返的Content-disposition// 需要后端设置 Access-Control-Expose-Headers: Content-disposition 使得浏览器将该字段暴露给前端var name = content && content.split(';')[1].split('filename=')[1];var fileName =decodeURIComponent(name)downloadFile(req.response,fileName)// 调用将文件流转成文件的方法，后面有写};
　　　　req.send(JSON.stringify(params));}// axios请求写法functiondownload(){axios({
　　　　method:'post',
　　　　headers:{'Content-Type':'application/json; charset=utf-8'},
　　　　url:'/robot/strategyManagement/analysisExcel',
　　　　responseType:'blob',
　　　　headers:{//如果需要权限下载的话，加在这里
　　　　　　Authorization:'123456'}
　　　　data:JSON.stringify(params),}).then(function(res){var content = res.headers['content-disposition'];var name = content && content.split(';')[1].split('filename=')[1];var fileName =decodeURIComponent(name)downloadFile(res.data,fileName)// 调用将文件流转成文件的方法，后面有写})}

step2 处理文件流下载

方式一： 通过URL.createObjectURL()下载

// URL.createObjectURL() 静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的document绑定downloadFile:function(data,fileName){// data为blob格式var blob =newBlob([data]);var downloadElement = document.createElement('a');var href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    downloadElement.download = fileName;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);}

方式二：通过 FileReader.readAsDataURL()下载

// readAsDataURL() 方法会读取指定的 Blob 或 File 对象。读取操作为异步操作，当读取完成时，可以从onload回调函数中通过实例对象的result属性获取data:URL格式的字符串（base64编码），此字符串即为读取文件的内容，可以放入a标签的href属性中downloadFile:function(data,fileName){const reader =newFileReader()// 传入被读取的blob对象
   reader.readAsDataURL(data)// 读取完成的回调事件
   reader.onload=(e)=>{let a = document.createElement('a')
       a.download = fileName
       a.style.display ='none'// 生成的base64编码let url = reader.result
       a.href = url
       document.body.appendChild(a)
       a.click()
       document.body.removeChild(a)}}

readAsDataURL 和 createObjectURL 对比
readAsDataURL (blob)createObjectURL (blob)返回值可以得到一段base64的字符串得到的是当前文件的一个内存url内存js垃圾回收机制自动从内存中清理存在于当前document内，清除方式通过revokeObjectURL()手动清除执行方式通过回调的方式f返回，异步执行直接返回，同步执行多个文件同时处理多个文件时，需要一个文件对应一个FileReader对象依次返回，没有影响优势对比可直接转为base64格式，直接用于业务可直接转为base64格式，直接用于业务得到本地内存容器的URL地址，方便预览，需要注意手动释放内存的问题，性能优秀得到本地内存容器的URL地址，方便预览，需要注意手动释放内存的问题，性能优秀