web前端以文件流的形式导出Excel文件
一般web前端处理导出文件有两种方法:
1、服务端返回完整URL,直接打开URL即可;
2、服务端返回数据流,前端解析数据流完成导出功能;
今天主要分享下第二种方式,直接上代码(兼容ie10以上):
// url为服务端返回的流数据
const exportParams = (url) => {
const aLink = document.createElement('a');
const blob = new Blob([url],{type: "application/vnd.ms-excel"});
// 创建一个当前文件的内存URL
const _href = URL.createObjectURL(blob);
aLink.style.display = 'none';
aLink.href = _href;
document.body.appendChild(aLink);
aLink.setAttribute('download', '用户数据.xlsx');
aLink.click();
document.body.removeChild(aLink);
// 手动释放创建的URL对象所占内存
URL.revokeObjectURL(_href);
}其实现原理就是先把服务端返回的数据流通过URL.createObjectURL()方法转成一个URL,这个URL是存放在内存中的,URL的生命周期是和创建的它的document绑定,也就是说在document unload的时候也会得到内存释放;然后通过设置<a></a>的download属性值,从而实现导出功能,最后再手动释放下创建的URL对象的内存。
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!