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