在我们写项目的时候经常会遇到下载图片、下载表格的操作,

我们正常使用axios的时候responseType是json,当我们要下载的时候必须要设置responseType为blob,否则下载出来的图片会显示图片内容损坏

export function post(url, params = {}, dataType = ‘json’, responseType = ‘json’) {
return new Promise((resolve, reject) => {
params = dataType == ‘json’ ? params : QS.stringify(params);
responseType = responseType == ‘blob’ ? ‘blob’ : responseType;
axios.post(url, params,{ responseType })

.then(res => { resolve(res.data); })
.catch(err => { reject(err.data) })
});
}
在这里插入图片描述
传入的data是后台返回的二进制流,name是要下载的图片名称,可以跟后台商量一下name在什么地方拿,比如response里返回headers的一个字段,这里主要是模拟点击 a 标签下载的一个过程

export const downLoad = (data,name) => {
let fileName = name;
let elink = document.createElement(“a”);
// 设置下载文件名
elink.setAttribute(“download”, fileName);
elink.style.display = “none”;
let blob = new Blob([data],{type: ‘image/png’});
elink.href = window.URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
}
在这里插入图片描述
如果是下载表格需要将type设置为
{type: application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet;charset=utf-8}

当excel下载下来后打不开时将headers改为headers: {“biz-source-param”: “BLG”},type改为 "application/x-xls"

Logo

前往低代码交流专区

更多推荐