背景:element-ui写的一个表格,由于数据量太多而目前的筛选功能不完善,新增了导出数据的功能,一键将所有数据下载为一个excel,让运营人员去excel中搜索。导出数据的功能是后端小哥哥做哒,前端只负责下载。
此时,后台小哥哥抛给你一个下载的url
可以用
window.location.href = url;
来下载,但是不够优美(不能根据需求重命名
一般的做法是获取文件 Blob,然后下载重命名,简单整理了一下
// 下载方法
downloadExcel(url, filename) {
this.getBlob(url).then((blob) => {
this.saveAs(blob, filename);
});
},
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {Promise}
*/
getBlob(url) {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
},
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
const body = document.querySelector('body');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
// fix Firefox
link.style.display = 'none';
body.appendChild(link);
link.click();
body.removeChild(link);
window.URL.revokeObjectURL(link.href);
}
},