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

embedded/2024/11/13 16:03:50/

前端将文件流导出为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>


http://www.ppmy.cn/embedded/137287.html

相关文章

大数据-218 Prometheus 插件 exporter 与 pushgateway 配置使用 监控服务 使用场景

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

云原生安全解决方案NeuVector 5.X部署实践

云原生安全解决方案NeuVector 5.X部署实践 NeuVector 5.X支持部署到docker、Rancher、Openshift以及各种公有云平台的Kubernetes集群环境上&#xff0c;支持YAML、Operator、helm等安装方式。本文实践在本地Kubernetes集群上部署NeuVector 5.X。 1. 部署方式概述 YAML方式部…

【前端】JavaScript高级教程:线程机制与事件机制

文章目录 1 进程与线程2 浏览器内核3 定时器引发的思考4 JS是单线程的5 事件循环模型6 H5 Web Workers6.1 Web Workers_测试16.2 worker.js6.3 Web Workers_测试2 1 进程与线程 进程&#xff1a;程序的一次执行&#xff0c;它占有一片独有的内存空间。线程&#xff1a;CPU的基…

Unity3D UI 双击和长按

Unity3D 实现 UI 元素双击和长按功能。 UI 双击和长按 上一篇文章实现了拖拽接口&#xff0c;这篇文章来实现 UI 的双击和长按。 双击 创建脚本 UIDoubleClick.cs&#xff0c;创建一个 Image&#xff0c;并把脚本挂载到它身上。 在脚本中&#xff0c;继承 IPointerClickHa…

第二章springboot核心配置与注解

本章学习的目标 2.1 全局配置文件 全局配置文件能对默认配置值进行修改&#xff0c;下面介绍两种全局配置文件&#xff1a; 2.1.1 application.properties配置文件 springboot项目启动时会自动启动这个配置文件&#xff0c;我们可以在这个文件中配置相关属性&#xff0c;&…

minio 分布式

方案设计 需要5台服务器&#xff0c;一台nginx用作分发请求&#xff0c;4台minio服务器&#xff0c;每个minio服务器上至少2个盘。在这个方法中&#xff0c;我使用了lvm的缓存&#xff0c;在同种固态盘的情况下&#xff0c;可以使读性能提高数倍到十倍&#xff0c;使写性能提高…

音视频入门基础:MPEG2-TS专题(4)——使用工具分析MPEG2-TS传输流

一、引言 有很多工具可以分析MPEG2-TS文件/流&#xff0c;比如Elecard Stream Analyzer、PROMAX TS Analyser、easyice等。下面一一对它们进行简介&#xff08;个人感觉easyice功能更强大一点&#xff09;。 二、Elecard Stream Analyzer 使用Elecard Stream Analyzer工具可以…

【专题】2024年全球生物医药交易报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p38191 在当今复杂多变的全球经济环境下&#xff0c;医药行业正面临着诸多挑战与机遇。2024 年&#xff0c;医药行业的发展态势备受关注。 一方面&#xff0c;全球生物医药交易活跃&#xff0c;2021 - 2023 年的交易中&#xff0c;已…