前端post请求接收后台传来的二进制文件流blob实现下载功能,解决下载下来的文件打不开问题
下载文件的方法onDownload(){download(params).then(res => {//注意:如果res是二进制流字符串而不是blob,则需要通过new Blob([res])转化成blobvar downloadElement = document.createElement('a');var href = window.URL.createObjectURL(res);
·
下载文件的方法
onDownload(){
download(params).then(res => {
//注意:如果res是二进制流字符串而不是blob,则需要通过new Blob([res])转化成blob
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(res); //创建下载的链接
downloadElement.href = href;
downloadElement.download = '文件名'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.style.display = 'none'
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})
}
还有一步非常重要!!!在请求接口时要设置responseType为blob
export const download = (params) => {
return axios.post(url,params,{responseType:'blob'})
}
还有一点需要注意,如果项目中用到了mock,请求结果会被mock拦截,并且修改返回数据类型,这样就会出现下载下来的文件打不开。如下图:data的数据类型变成了字符串,request为MockXMLHttpRequest类型,这是因为被mock重写了
所以,需要把mock关掉,这样就好了
更多推荐
已为社区贡献1条内容
所有评论(0)