一、get请求下载:
window.open(url, params)
二、post请求下载
创建一个a标签下载
axios({ url: url, method: 'post', data: data, responseType: 'blob' }).then(res => { let blob = new Blob([res.data]) let url = window.URL.createObjectURL(blob) let link = document.createElement('a') link.style.display = 'none' link.href = url // 文件名一般是在res.headers里:content-disposition;fileName=xxxxxxxxxx.csv,这个让后端统一规定文件名怎么放前端就怎么取就行 let str = typeof res.headers['content-disposition'] === 'undefined' ? res.headers['Content-Disposition'].split(';')[1] : res.headers['content-disposition'].split(';')[1] let filename = typeof str.split('fileName=')[1] === 'undefined' ? str.split('filename=')[1] : str.split('fileName=')[1] link.setAttribute('download', decodeURIComponent(filename)) // 解码,这里也可以自定义下载的文件名字,如link.setAttribute('download', 'xxxxxdownload.xls') document.body.appendChild(link) link.click() //用新窗口打开window.open(link.click()),但是下载完成后不会先get请求那样自动关闭窗口 }) .catch(error => { console.log(error) })
用哪种方式下载:
1)下载文件比较大建议使用get。如果用post,点了会半天没反应,得加loading之类的而且体验也不好,用get在用window.open打开新窗口下载,下载完后会自动关闭窗口体验比较好
2)下载文件不大而且传参很多的话建议使用post。不过只能在本页面下载,不能打开新窗口下载,哪怕把数据放到window.open打开新窗口下载,但下载完成后不会自动关闭新窗口
3)下载文件很大而且传参也很大建议用get,传参过长超过浏览器限制,那让后台再加一个post接口,把这些多的参数用这个post传过去,再回传一下类似秘钥之类的用于get下载