后端返还二进制excl表格数据时候,如何实现在前端下载表格功能及出现表格打开失败的异常处理。

背景:

后端返还一个二进制流的excl表格数据,前端需要对其解析,然后可提供给客户进行下载。
思路:把二进制流数据转换给blob对象,然后利用a标签进行前端下载。

代码:

后端返还

类似如下的数据
在这里插入图片描述

前端代码:

    let res: any = await api.getData(data);
    let blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
    let href = window.URL.createObjectURL(blob); //创建下载的链接
    const link = document.createElement('a');
    link.href = href;
    link.download = '计算列表.xlsx';
    link.click();

如果正常情况下就可以解决下载问题。

异常处理:

在这里插入图片描述

以上问题需要更改一下接口请求数据的返回方式,

{
	url:'/',
	data:'//',
	responseType: 'arraybuffer',
}

这样就可以解决下载的问题了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java----继承

1、继承的定义 继承就是子类继承父类的特征和行为,使得子类对象具有父类的属性和方法(不劳而获) 使用 extends关键字 2、方法重写(方法覆盖) 子类可以重写父类中的方法,要求方法签名必须一样 3、方法重载…

高效批量剪辑视频,一键设置区间随机抽取画面,批量剪辑视频不再是梦!

在数字世界的浩瀚海洋中,视频内容日益丰富,如何从冗长的视频中快速抓取关键瞬间,将精彩定格为永恒?今天,我们为你带来一款强大的视频剪辑工具,它拥有批量从视频中指定区间随机抽帧并导出保存的功能&#xf…

蓝桥杯刷题day13——乘飞机【算法赛】

一、问题描述 等待登机的你看着眼前有老有小长长的队伍十分无聊,你突然想要知道,是否存在两个年龄相仿的乘客。每个乘客的年龄用一个 0 到 36500 的整数表示,两个乘客的年龄相差 365 以内就认为是相仿的。 具体来说,你有一个长度…

聚观早报 | 微软和OpenAI联合;日本将与欧盟合作

聚观早报每日整理最值得关注的行业重点事件,帮助大家及时了解最新行业动态,每日读报,就读聚观365资讯简报。 整理丨Cutie 4月01日消息 微软和OpenAI联合 日本将与欧盟合作 苹果为员工提供优惠 萤石2024春季新品发布会 特斯拉Model Y车…

天池医疗AI大赛[第一季] Rank8解决方案[附TensorFlow/PyTorch/Caffe实现方案]

团队成员:北京邮电大学 模式识别实验室硕士研究生 今年5月,参加了天池医疗AI大赛,这次比赛是第一次参加此类的比赛,经过接近半年的比赛,终于10月落下帷幕,作为第一次参加比赛,能在接近3000支队…

适用于智能断路器、新能源汽车充电枪锁、电动玩具、电磁门锁等的直流电机驱动芯片D6289ADA介绍

应用领域 适用于智能断路器(家用或工业智能空开)、新能源汽车充电枪锁、电动玩具、电磁门锁、自动阀门等的直流电机驱动。 功能介绍 D6289ADA是一款直流马达驱动芯片,它有两个逻辑输入端子用来控制电机前进、后退及制动。该电路具有良好的抗干…

[flink 实时流基础] 输出算子(Sink)

学习笔记 Flink作为数据处理框架,最终还是要把计算处理的结果写入外部存储,为外部应用提供支持。 文章目录 **连接到外部系统****输出到文件**输出到 Kafka输出到 mysql自定义 sink 连接到外部系统 Flink的DataStream API专门提供了向外部写入数据的方…

深入了解 Vue 3 中的 Keyframes 动画

在本文中,我们将探讨如何在 Vue 3 中实现 Keyframes 动画。Keyframes 动画允许我们通过定义关键帧来创建复杂的动画效果,从而为用户提供更吸引人的界面体验。 transition动画适合用来创建简单的过渡效果。CSS3中支持使用animation属性来配置更加复杂的动…

学习笔记——《计算机组成原理》

框图 第一章 总线 1、什么是总线? 总线是连接各个部件的信息传输线,是各个部件共享的传输介质。 2、总线特点? 相对于一对一的连线来说,可拓展性更好,也更省空间,但是某个时刻只能有一对部件进行通信。 3、…

如何将平板或手机作为电脑的外接显示器?

先上官网链接:ExtensoDesk 家里有一台华为平板,自从买回来以后除了看视频外,基本没什么作用,于是想着将其作为我电脑的第二个屏幕,提高我学习办公的效率,废物再次利用。最近了解到华为和小米生态有多屏协同…

基于深度学习的停车场车辆检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 上图测试结果如下图所示: 2.算法运行软件版本 matlab2022a 3.部分核心程序 image imread(image_test\test.jpg); image2 image;%图…

关于OcenaBase v4.2中,分区转移和负载均衡的技术解读

OceanBase​​​​​​​​​​​​​​作为一款原生分布式数据库,其核心的技术特性之一是高可扩展性,其具体表现在两个方面: 首先,是灵活的扩缩容能力,包括垂直扩缩容和水平扩缩容: 垂直扩缩容&#xff…

探究云手机的海外原生IP优势

随着全球数字化进程的加速,企业越来越依赖于网络来扩展其业务。在这个数字时代,云手机作为一种创新的通信技术,已经成为了企业网络优化的重要组成部分。云手机支持海外原生IP的特性,为企业在国际市场上的拓展提供了全新的可能性。…

【Node.js从基础到高级运用】二十、Node.js 强大的REPL

引言 Node.js REPL(Read-Eval-Print Loop)是一种交互式的命令行工具,它允许开发者快速地执行JavaScript代码,并查看结果。这个功能在进行快速原型设计、调试、学习JavaScript或Node.js时非常有用。 启动REPL 首先,确保…

高度不同的流体瀑布css实现方法

商城商品列表 实现瀑布流展示,通过flex或grid实现会导致每行中的列高度一致,无法达到错落有致的感觉; 为此需要用到: CSS columns 属性 columns 属性是一个简写属性,用于设置列宽和列数。 CSS 语法 columns: column-wi…

Java类和对象练习题

练习一 下面代码的运行结果是() public static void main(String[] args){String s;System.out.println("s"s);} 解析:本题中的代码不能编译通过,因为在Java当中局部变量必须先初始化,后使用。所以此处编译不…

信息安全技术基础知识总结

一、信息安全基础知识 信息安全基本要素: 1. 机密性(C):确保信息不暴露给未授权的实体或进程 2. 完整性(I):只有得到允许的人才能修改数据,并且能够判别出数据是否已被篡改 3. 可用性…

论文笔记✍GS3D- An Efficient 3D Object Detection Framework for Autonomous Driving

论文笔记✍GS3D: An Efficient 3D Object Detection Framework for Autonomous Driving 📜 Abstract 🔨 主流做法限制 : 我们在自动驾驶场景中提出了一种基于单个 RGB 图像的高效 3D 物体检测框架。我们的工作重点是提取 2D 图像中的底层 3…

降低项目延期概率的5大注意事项

降低项目延期概率对项目非常重要。因为项目延期往往会导致成本增加,降低客户满意度,影响企业在市场上的竞争力,造成资源浪费。因此,我们需要降低项目延期概率,实现企业长远发展。 而降低项目延期概率,一般来…

java基础之高级面试-2024

抽象类和接口有什么区别 定义和设计:抽象类是使用abstract关键字定义的类,可以包含抽象方法和非抽象方法,可以有实例变量和构造方法;接口通过interface关键字定义,只能包含抽象方法、默认方法和静态方法,不…