后端接口返回二进制数据流,前端如何将其转换成对应的excel、csv和json文件格式并下载

本文主要是介绍在工作中遇到的后端接口返回一个二进制数据流,前端在界面上创建下载按钮并下载成对应格式的文件导出。

downloadData({start: startTime,end: endTime,exportType: 0, // 0-excel, 1-csv, 2-json
}).then((res) => {download(res, startTime, endTime, exportType);
})

接口会返回一个二进制数据流,如下图所示。
后端二进制流
startTimeendTime 是用来构建文件名字,exportType 是用来确定导出文件格式后缀的。

功能图
根据对应的按钮获取对应文件,并由浏览器进行下载。

const download = (res: any, startDate: any, endDate: any, exportType: any) => {const blob = new Blob([res])let filename = "";let startPrefix = new Date(startDate);let endPrefix = new Date(endDate);// 起名let date = startPrefix.getFullYear().toString() + (startPrefix.getMonth() + 1 < 10 ? '0' + (startPrefix.getMonth() + 1) : startPrefix.getMonth() + 1) +startPrefix.getDate().toString() + '-' + endPrefix.getFullYear().toString() + (endPrefix.getMonth() + 1 < 10 ? '0' + (endPrefix.getMonth() + 1) : endPrefix.getMonth() + 1) + endPrefix.getDate().toString();// 判断后缀if (exportType=== 0) filename = date + '.json';else if (exportType === 1) filename = date + '.xlsx';else filename = date + '.csv';if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, filename);} else {// 导出const url: any = window.URL.createObjectURL(blob);const link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', filename);document.body.appendChild(link);link.click();URL.revokeObjectURL(url.href);document.body.removeChild(link);}
}

导出主要是通过创建一个 url 并自行下载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/7078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

毕业设计:《基于 Prometheus 和 ELK 的基础平台监控系统设计与实现》

前言 《基于 Prometheus 和 ELK 的基础平台监控系统设计与实现》&#xff0c;这是我在本科阶段的毕业设计&#xff0c;通过引入 Prometheus 和 ELK 架构实现企业对指标与日志的全方位监控。并且基于云原生&#xff0c;使用容器化持续集成部署的开发方式&#xff0c;通过 Sprin…

通信系列:通信中如何度量消息中所包含的信息量?如何评估通信系统的性能?

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、通信中如何度量消息…

小吉/希亦/鲸立内衣洗衣机怎么样?深度测评谁更好用!

内衣洗衣机是近几年新兴的家电产品&#xff0c;以清洁效果好、除菌能力强&#xff0c;被很多人种草入手了&#xff01;但网上有不少人虽感兴趣&#xff0c;但不清楚如何选。担心买到质量差&#xff0c;清洗不干净的产品。作为一名家电测评博主&#xff0c;我今天特意围绕被问最…

神奇的Vue3 - 组件探索

神奇的Vue3 第一章 神奇的Vue3—基础篇 第二章 神奇的Vue3—Pinia 文章目录 神奇的Vue3了解组件一、注册组件1. 全局注册​2. 局部注册3. 组件命名 二、属性详解1. Props&#xff08;1&#xff09;基础使用方法&#xff08;2&#xff09;数据流向&#xff1a;单项绑定原则&…

5-在Linux上部署各类软件

1. MySQL 数据库安装部署 1.1 MySQL 5.7 版本在 CentOS 系统安装 注意&#xff1a;安装操作需要 root 权限 MySQL 的安装我们可以通过前面学习的 yum 命令进行。 1.1.1 安装 配置 yum 仓库 # 更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022# 安装Mysql…

GraphGPT——图结构数据的新语言模型

在人工智能的浪潮中&#xff0c;图神经网络&#xff08;GNNs&#xff09;已经成为理解和分析图结构数据的强大工具。然而&#xff0c;GNNs在面对未标记数据时&#xff0c;其泛化能力往往受限。为了突破这一局限&#xff0c;研究者们提出了GraphGPT&#xff0c;这是一种为大语言…

重学java 29.经典接口

光阴似箭&#xff0c;我好像跟不上 —— 24.5.6 一、java.lang.Comparable 我们知道基本数据类型的数据(除boolean类型外)需要比较大小的话&#xff0c;直接使用比较运算符即可&#xff0c;但是引用数据类型是不能直接使用比较运算符来比较大小的。那么&#xff0c;如何解决这个…

(读书笔记-大模型) LLM Powered Autonomous Agents

目录 智能体系统的概念 规划组件 记忆组件 工具组件 案例研究 智能体系统的概念 在大语言模型&#xff08;LLM&#xff09;赋能的自主智能体系统中&#xff0c;LLM 充当了智能体的大脑&#xff0c;其三个关键组件分别如下&#xff1a; 首先是规划&#xff0c;它又分为以下…

代码随想录第51天 | 309.最佳买卖股票时机含冷冻期

309.最佳买卖股票时机含冷冻期 309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 动态规划来决定最佳时机&#xff0c;这次有冷冻期&#xff01;| LeetCode&#xff1a;309.买卖股票的最佳时机含冷冻期_哔哩哔哩_bi…

状压dp 理论例题 详解

状压dp 四川2005年省选题&#xff1a;互不侵犯 首先我们可以分析一下&#xff0c;按照我们普通的思路&#xff0c;就是用搜索&#xff0c;枚举每一行的每一列&#xff0c;尝试放下一个国王&#xff0c;然后标记&#xff0c;继续枚举下一行 那么&#xff0c;我们的时间复杂度…

曼奇立德10节春季插画研修课

课程介绍 课程探讨了存在主义心理学的基本原理和方法。通过学习该课程&#xff0c;您将了解到存在主义的核心概念&#xff0c;如自由意志、责任感和意义寻求。您将学会运用存在主义理论和技巧来帮助个人面对挑战、追求自我实现&#xff0c;并寻找生活的意义。这门课程将启发您的…

从固定到可变:利用Deformable Attention提升模型能力

1. 引言 本文将深入探讨注意力机制的内部细节&#xff0c;这是了解机器如何选择和处理信息的基础。但这还不是全部&#xff0c;我们还将探讨可变形注意力的创新理念&#xff0c;这是一种将适应性放在首位的动态方法。 闲话少说&#xff0c;我们直接开始吧&#xff01; 2. 注…

pytest教程-36-钩子函数-pytest_collection_start

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了pytest_unconfigure钩子函数的使用方法&#xff0c;本小节我们讲解一下pytest_collection_start钩子函数的使用方法。 pytest_collection_start(session) 是一个 pytest 钩子函数&#xff0c;…

Python_4-对象序列化操作

文章目录 Python中对象数据持久化操作模块学习笔记marshal模块优点缺点使用示例保存数据到文件从文件读取数据 shelve模块优点缺点使用示例保存数据到文件从文件读取数据 总结 Python中对象数据持久化操作模块学习笔记 在Python中&#xff0c;数据持久化指的是将程序中的数据结…

PHP基于B/S版 医院不良事件管理系统源码vscode+laravel8医院如何加强不良事件上报系统的管理 AEMS系统源码

PHP基于B/S版 医院不良事件管理系统源码vscodelaravel8医院如何加强不良事件上报系统的管理 AEMS系统源码 医院安全&#xff08;不良&#xff09;事件管理AEMS系统AEMS采用无责的、自愿的填报不良事件方式&#xff0c;有效地减轻医护人员的思想压力&#xff0c;实现以事件为主要…

快速编写测试用例(超详细~)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 当你学会了如何设计测试用例之后&#xff0c;接下来便是开始用例…

ERP系统电子文件归档和电子档案管理规范

ERP系统电子文件归档和电子档案管理规范 1 范围 本文件描述了企业资源计划&#xff08;ERP&#xff09;系统形成电子文件归档和电子档案管理的方法。 本文件适用于企业资源计划&#xff08;ERP&#xff09;系统&#xff08;含采购、销售、物料、生产计划、质量、设备、项目…

使用C#和EF Core实现高效的SQL批量插入

在软件开发中&#xff0c;批量插入数据是一个常见的需求&#xff0c;特别是在数据迁移、初始化数据库或进行大量数据处理时。Entity Framework Core (EF Core) 是一个流行的.NET对象关系映射器&#xff08;ORM&#xff09;&#xff0c;它简化了数据库操作&#xff0c;但在进行大…

Linux CPU 飙升 排查五步法

排查思路-五步法 1. top命令定位应用进程pid 找到最耗时的CPU的进程pid top2. top-Hp[pid]定位应用进程对应的线程tid 找到最消耗CPU的线程ID // 执行 top -Hp [pid] 定位应用进程对应的线程 tid // 按shift p 组合键&#xff0c;按照CPU占用率排序 > top -Hp 111683.…

SparkSQL编程入口和模型与SparkSQL基本编程

SparkSQL编程入口和模型 SparkSQL编程模型 主要通过两种方式操作SparkSQL&#xff0c;一种就是SQL&#xff0c;另一种为DataFrame和Dataset。 1)SQL&#xff1a;SQL不用多说&#xff0c;就和Hive操作一样&#xff0c;但是需要清楚一点的是&#xff0c;SQL操作的是表&#xf…