欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > [经典] 前端js将文件流导出为csv/excel文件

[经典] 前端js将文件流导出为csv/excel文件

2025/2/24 9:11:16 来源:https://blog.csdn.net/renqq001/article/details/143700556  浏览:    关键词:[经典] 前端js将文件流导出为csv/excel文件

前端将文件流导出为csv/excel文件有两种方式:
1.后端直接返回文件连接:
前端正常请求,后端返回一个静态文件链接,直接使用:
window.location.href = url
简单,但是缺点是耗资源,后端需要把数据转化为excel存起来,并且直接暴露连接。
2.后台返回二进制流:
前台请求后台接口拿到二进制流转化为文件
前端实现浏览器将数据下载为文件

<!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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词