当前位置: 首页 > Web前端 > HTML5

Web前端以文件流的形式导出Excel文件

时间:2023-04-04 23:11:10 HTML5

Web前端一般有两种处理导出文件的方式:1、服务器端返回完整的URL,直接打开URL即可;2、服务端返回数据流,前端解析数据流完成导出功能;今天主要分享第二种方法,直接上传代码(兼容ie10及以上版本)://url为服务器返回的流数据constexportParams=(url)=>{constaLink=document.createElement('a');constblob=newBlob([url],{type:"application/vnd.ms-excel"});//创建当前文件的内存URLconst_href=URL.createObjectURL(blob);aLink.style.display='无';aLink.href=_href;document.body.appendChild(aLink);aLink.setAttribute('下载','UserData.xlsx');aLink.click();document.body.removeChild(aLink);//手动释放创建的URL对象占用的内存URL.revokeObjectURL(_href);}实现原理是先将服务器返回的数据流通过URL.createObjectURL()方法转换为URL,这个URL为存储在内存中,URL的生命周期与创建的文档绑定,也就是说文档卸载时内存也会被释放;然后通过设置的download属性值,可以实现Export功能,最后手动释放创建的URL对象的内存。