业务需要数据导出需求时,后端返回的流地址如图:
实现步骤具体如下:
1.axios请求添加responseType:
将responseType: 'arraybuffer'添加至请求头,否则会造成下载文件无法打开的情况
2.添加处理函数:
resolveBlob(res, name) { console.log("export"); let blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); let downloadElement = document.createElement("a"); let href = window.URL.createObjectURL(blob); // 创建下载的链接 downloadElement.href = href; downloadElement.download = name; // 下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); // 点击下载 document.body.removeChild(downloadElement); // 下载完成移除元素 window.URL.revokeObjectURL(href); // 释放掉blob对象 }
3.数据请求接口,调用处理函数:
resolveBlob(流地址,文件名称)