axios 文件流下载
commonDownload(parameter) {
//公共的下载方法
return new Promise((resolve, reject) => {
axios({
url:parameter.defaultUrl+'/Common/FileDownloadPost',
method: 'post',
responseType:'arraybuffer',
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8','token':getToken()},
data:qs.stringify({
resourType:parameter.resourType,
resourceId:parameter.resourceId
}),
}).then(response=>{
var filename = response.headers//下载后文件名
filename = filename["content-disposition"]
filename = decodeURI(filename.split(";")[1].split("filename=")[1]);
var blob = new Blob([response.data],{type:response.headers['content-type']})
var downloadElement = document.createElement('a');
var href = URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = filename
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
URL.revokeObjectURL(href); //释放掉blob对象
resolve();
}).catch(err=>{
reject(err)
})
})
}
后端把文件名放在了响应头部,content-disposition里面,
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
这里有一点要注意 ,我因为这个问题 耽误了好长时间
这里这个responseType 不是写在headers里面的,我之前一直写在headers里面 ,所以下载下来的文件一直不能用
本文地址:https://blog.csdn.net/xiaomanonyo/article/details/107557307
下一篇: php--获取文件的磁盘空间
推荐阅读
-
fat32转ntfs方法大全解决下载存储大于4GB以上的单个文件
-
下载文件到桌面时图标左下角出现小黄锁是什么原因如何解决
-
IE提示当前安全设置不允许下载该文件怎么办?原因及图文解决方法
-
IE8下载文件时无法调用迅雷怎么办?IE8浏览器无法用迅雷下载问题的解决办法介绍
-
IE提示当前安全设置不允许下载该文件怎么办的2种解决方法
-
vue+axios实现文件下载及vue中使用axios的实例
-
python+selenium+chrome批量文件下载并自动创建文件夹实例
-
python 多线程将大文件分开下载后在合并的实例
-
Jquery Ajax请求文件下载操作失败的原因分析及解决办法
-
谷歌Chrome浏览器不能下载百度网盘文件的两种解决办法