vue下载文件到本地
在我们写项目的时候经常会遇到下载图片、下载表格的操作,传入的data是后台返回的二进制流,name是要下载的图片名称,可以跟后台商量一下name在什么地方拿,比如response里返回headers的一个字段我们正常使用axios的时候responseType是json,当我们要下载的时候必须要设置responseType为blob,否则下载出来的图片会显示图片内容损坏export cons...
在我们写项目的时候经常会遇到下载图片、下载表格的操作,
我们正常使用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"
更多推荐
所有评论(0)