对于这个问题,搞了我两天,心态都给我怎崩溃了。各种百度上搜,基本都是同一代码。打死我都不信,结果依然是乱码。
export function Usb_download(params) {
return request({
url: api.UsbDownload,
responseType: 'blob', //arraybuffer也可以
params
})
}
/* 条件下载 */
dowloadClick() {
this.downLoading = true;
let query = _.cloneDeep(this.searchFormProps.query);
query.status=this.status
this.queryValue(query);
//获取下载文件名
this.$message.info("请求下载中...");
callBack_download({ ...query })
.then((res) => {
this.downloadFile(res)
})
.catch(() => {
this.$message.error("下载失败");
})
.finally(() => {
this.downLoading = false;
});
},
downloadFile(res) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel;charset=UTF-8",
});
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
//获取文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
},
基本用了各种方法,依然是乱码。然后后面我打印axios请求
我就发现,请求的resposeType是空,不是blob类型,识别不了,一直下载文件都是乱码,搞得我真想骂人了,到底是怎么回事,后来搜到一个博主,终于让我找到原因了
原来在本项目中使用了mockjs来模拟请求后端接口获得数据,然而我看了下代码,mock并没有对这个下载接口做拦截啊,那为什么这个接口返回blob有问题了,于是我看了下mockjs的源码,大概知道原因在那了
mockjs初始化的时候给拦截响应设置了responseType:''
,那就把mockjs给注释掉。后来我把mock注释掉了,重启一下项目就好了。
心累呀,找个解决问题,刚开始后端都在找原因,怀疑自己是不是写错了
还有一种情况,就是ajax自己用promise封装的,没有设置responseType,也会照成乱码
function ajax(req) {
return new Promise((resolve) => {
Axios.request({
url: req.url,
method: req.method || 'GET',
data: req.data || {},
params: req.params || {},
})
.then((d) => {
resolve(d)
})
.catch((err) => {
resolve(err)
})
})
}
export default ajax
加上responseType就解决了
function ajax1(req) {
return new Promise((resolve) => {
Axios.request({
url: req.url,
method: req.method || 'GET',
data: req.data || {},
params: req.params || {},
responseType:req.responseType||""
})
.then((d) => {
resolve(d)
})
.catch((err) => {
resolve(err)
})
})
}
export default ajax1