下载文件的方法

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关掉,这样就好了
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐