前端将文件流导出为csv/excel文件有两种方式:
1.后端直接返回文件连接:
前端正常请求,后端返回一个静态文件链接,直接使用:
window.location.href = url
简单,但是缺点是耗资源,后端需要把数据转化为excel存起来,并且直接暴露连接。
2.后台返回二进制流:
前台请求后台接口拿到二进制流转化为文件
前端实现浏览器将数据下载为文件
javascript"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>前端将文件流导出为csv/excel文件</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body></body>
<script>function downloadFile(data,name){if (!data) {console.log('下载失败,解析数据为空!')return}// 创建一个新的url,此url指向新建的Blob对象// let url = window.URL.createObjectURL(new Blob([data]))let url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data);// 创建a标签,并隐藏改a标签let link = document.createElement('a')link.style.display = 'none'// a标签的href属性指定下载链接link.href = url//setAttribute() 方法添加指定的属性,并为其赋指定的值。link.setAttribute('download', name + '.csv')document.body.appendChild(link)link.click()}$.ajax({url: "你的接口后台直接返回二进制流",type: "post",responseType: 'blob',success: function(result){console.log(result)downloadFile(result,"test")}});</script>
</html>