这两天，在处理日志下载功能中，后台接口以二进制流文件的形式传给前端，作为萌新的自己，也是查找了很多资料，进行处理。虽然网上也有很多方法，但真的应用在自己代码上且有效，也真是不容易。下班后，赶紧进行总结，为自己积累经验。

后台传来的流文件，调用接口成功，发现response是这样，原来是后台传的流文件数据，前端需要进行流文件处理，实现压缩文件下载。

调用后台接口，状态200，但是总是不走then代码而跳到catch代码中，肯定是then中存在错误代码，以至于不走then代码。自己当时按照别人的postForm封装axios代码，进行封装get的axisos,结果是多此一举。其实直接用下面的方式就行。

在store.js中

//肯定是有params且params={'fileName:fileName,'filePath:filePath'}
该方法名为wwww
axios
.get(
　　'/eng/downlog?fileName-&(params.fileName)&filePath=&(params.filePath)
) .then(response => { 
　　console.log(response); 
}) .catch(function (error) { 
　　console.log(error); 
});

在xx.vue中downLOg()下载方法

downLOg(fileName,filePath){

let params = {
　　'fileName:fileName,
　　'filePath:filePath'
}
this.$stroe.dispatch('wwww'，params)
.then(response => {
   const blob = new Blob([response]);
   const downloadElement = document.createElement("a");
   const href = window.URL.createObjectURL(blob);
   const name = params.fileName;
   downloadElement.href = href;
   downloadElement.download = name;
   document.body.appendChild(downloadElement);
   downloadElement.click();
   document.body.removeChild(downloadElement);
   window.URL.revokeObjectURL(href);
})
.catch(err => {

})
}

就可以下载日志.zip压缩包文件。

但是下载的压缩包，打不开，提升文件已破损。原来是没有responseType:’blob’。

在store.js中补充结果如下：

.get(
　　'/eng/downlog?fileName-&(params.fileName)&filePath=&(params.filePath),{responseType:'blob'}
) .then(response => { 
　　console.log(response); 
}) .catch(function (error) { 
　　console.log(error); 
});　

再去下载压缩包，发现可以下载，而且可以正常解压。

console.log(res)
                    const blob = new Blob([res.data]);
                    const downloadElement = document.createElement("a");
                    const href = window.URL.createObjectURL(blob);
                    //后台再header中传文件名
                    const name = fileName;
                    downloadElement.href = href;
                    downloadElement.download = name;
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement); // 下载完成移除元素
                    window.URL.revokeObjectURL(href); // 释放掉blob对象

版权声明：本文为LYD312原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/LYD312/p/12031531.html