vue下载图片或者导出excel表格到本地

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

我们正常使用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}