前端下载文件问题之如何获取报错信息

问题:点击下载后。接口会生成并返回文件流。在极端情况下接口数据返回异常,需要抛出错误信息,比如后端拼接错误情况、空文件情况。
难点:responseType设置为Blob后,返回内容为二进制文件流,从而无法获取错误信息。文件流截图如下:
在这里插入图片描述
解决方法:FileReafer()方案解决,示例代码:


        if(res.data.success===undefined && res.data.type === 'application/json'){
          const fileReader = new FileReader()
          fileReader.readAsText(res.data,'utf-8')
          fileReader.onload = function(){
            const result = JSON.parse(fileReader.result)
            // 获取到接口json对象。
			// 	情况1:有返回msg和code码(通过和业务层协商获取),可根据result.code码,弹出result.msg提示语
			// 情况2: 返回正常,data为null,表明为空文件,弹窗提示为空文件取消下载。
          }
          return
        }

总结:
1.下载文件场景ResponseType:"blob"时,需要报错提示,通过new FileReader把返回的数据转成文件,从而读取错误信息;

2.文件下载的方法,组装成二进制流文件,通过content-disposition获取正确的中文件名。代码如下:

if (res.headers["content-disposition"]) {
    const fileName = decodeURIComponent(
      res.headers["content-disposition"].split("=")[1]
    );
    byteToFile(res.data, fileName);
    return true
  }

3.byteToFile,返回的文件流数据转化为路径,创建A标签,触发点击下载文件路径。

export const byteToFile = (data, fileName) => {
	  let blob = new Blob([data]); 
	  let url = window.URL.createObjectURL(blob); 
	  let aLink = document.createElement("a");
	  if (fileName) {
	    aLink.download = fileName;
	  }
	  aLink.href = url;
	  aLink.click();
}

;

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

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

相关文章

03、Kafka ------ CMAK(Kafka 图形界面管理工具) 下载、安装、启动

目录 CMAK(Kafka 图形界面管理工具)下载安装启动打开 cmak 图形界面 CMAK(Kafka 图形界面管理工具) Kafka本身并没有提供Web管理工具,而是推荐使用bin目录下各种工具命令来管理Kafka, 这些工具命令其实用起…

安达发|基于APS排程系统的PDM功能

APS系统(Advanced Planning and Scheduling,先进计划与排程)是一种基于APS系统(Advanced Planning and Scheduling,先进计划与排程)是一种基于供应链管理和生产管理的综合性软件系统。它通过整合企业内外部…

安达发APS排产软件之PDM产品工艺数据管理

PDM(Product Data Management,产品数据管理)是一种用于管理产品全生命周期内所有与产品相关的信息和数据的技术。在制造业中,PDM系统被广泛应用于产品工艺数据管理,以提高生产效率、降低成本、保证产品质量和缩短产品上…

Vue3+Pinia实现持久化动态主题切换

PC端主题切换大家都用过,下面用Vue3Pinia实现一下这个过程; 【源码地址】 1、准备工作 npm install pinia npm install pinia-plugin-persist2、基础配置 // main.js import { createApp } from vue import App from ./App.vue import bootstrap from "../bo…

Java面向对象(抽象类,接口,内部类)

文章目录 今日内容教学目标 第一章 抽象类1.1 概述1.1.1 抽象类引入 1.2 abstract使用格式1.2.1 抽象方法1.2.2 抽象类1.2.3 抽象类的使用 1.3 抽象类的特征1.4 抽象类的细节1.5 抽象类存在的意义 第二章 接口2.1 概述2.2 定义格式2.3 接口成分的特点2.3.1.抽象方法2.3.2 常量2…

麒麟KYLINOS禁用IPV6地址

原文链接:麒麟KYLINOS操作系统上禁用IPv6的方法 hello,大家好啊!今天我要给大家介绍的是在麒麟KYLINOS操作系统上禁用IPv6的方法。IPv6是最新的网络通信协议,旨在解决IPv4地址耗尽的问题。然而,在某些特定的网络环境或…

MYSQL 索引使用规则

索引失效 最左前缀法则 where之后写的顺序不重要&#xff0c;存在就可以 范围查询后面的索引查询失效&#xff08;比如>&#xff09;,但是>或者<是不会失效的 不要在索引列上进行运算操作&#xff0c;否则索引失效。 字符串类型字段不加引号索引会失效 尾部模糊匹配…

ThreadLocalRandom类原理剖析

ThreadLocalRandom 类是JDK7在JUC包下新增的随机数生成器&#xff0c;它弥补了Random类在多线程下的缺陷。 Random 类及其局限性 在JDK7之前包括现在&#xff0c;java.util.Random都是使用比较广泛的随机数生成工具类&#xff0c;而且java.lang.Math中的随机数生成也使用的是…

网安面试三十到题(结束)

121 有文件上传了漏洞了&#xff0c;linux下怎么找xx.conf的文件 目录遍历,目录扫描 122 反序列化漏洞原理 ## 你要把别人序列化好的文件进行反序列化进行利用&#xff0c;但是在序列化的过程中&#xff0c;被别人注入了攻击代码、魔 法函数之类的&#xff0c;当你反序列化的时…

花为缘积萨伯爵名表工艺之美,传承卓越

腕表是时间的载体&#xff0c;也是品味的象征。在现代人眼中&#xff0c;它们不仅仅是时间的工具&#xff0c;更是一种艺术形式。在制表工艺的殿堂中&#xff0c;花为缘积萨伯爵名表以其独特的创造力和严谨缜密的要求&#xff0c;创作了一系列典范之作&#xff0c;将技术与美学…

伦敦银1盎司等于多少克?

1盎司的伦敦银大概等于31克&#xff0c;用于衡量伦敦银重量的“盎司”&#xff0c;是国际贵金属市场上专用的计量单位&#xff0c;它的全称是金衡盎司&#xff0c;英文的名字是troy ounce&#xff0c;它与西方日常用于计算重量的单位常衡盎司也不一样&#xff0c;一金衡盎司约等…

DTM分布式事务

DTM分布式事务 从内网看到了关于事务在业务中的讨论&#xff0c;评论区大佬有提及DTM开源项目[https://dtm.pub/]&#xff0c;开学开学 基础理论 一、Why DTM ​ 项目产生于实际生产中的问题&#xff0c;涉及订单支付的服务会将所有业务相关逻辑放到一个大的本地事务&#xff…

【性能测试入门】:压力测试概念!

压力测试可以验证软件应用程序的稳定性和可靠性。压力测试的目标是评估软件在极端负载条件下的鲁棒性和错误处理能力&#xff0c;并确保软件在紧急情况下不会崩溃。它甚至可以进行超出软件正常工作条件的测试&#xff0c;并评估软件在极端条件下的工作方式。 在软件工程中&…

简单介绍Java 的内存泄漏

java最明显的一个优势就是它的内存管理机制。你只需简单创建对象&#xff0c;java的垃圾回收机制负责分配和释放内存。然而情况并不像想像的那么简单&#xff0c;因为在Java应用中经常发生内存泄漏。 本教程演示了什么是内存泄漏&#xff0c;为什么会发生内存泄漏以及如何预防…

2024年第十届计算机与技术应用国际会议(ICCTA 2024)即将召开!

​ ​ 2024年第十届计算机与技术应用国际会议&#xff08;ICCTA 2024&#xff09; 会议时间&#xff1a;2024年5月15-17日 会议地点&#xff1a;奥地利维也纳 (线上线下会议) 会议官网&#xff1a; Home_ICCTA 2024 | Vienna, Austria 组织单位&#xff1a; 奥地利FH JOANN…

狂拿offer,这12道性能测试面试题你会多少?不要再被挖坑了

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、性能测试包含了…

NFS 共享存储实验

一、服务器部署 第一步、安装nfs和rpcbind包 [rootserver ~]# yum install -y nfs-utils rpcbind截图&#xff1a; 第二步、这里选择一个 lvm 挂载点做 NFS 共享目录 [rootserver ~]# df -HT截图&#xff1a; 第三步、修改配置文件 [rootserver ~]# vi /etc/exports /home …

2024农历新年是什么时候?电脑如何设置农历新年提醒

元旦的钟声已经远去&#xff0c;2024年的阳历新年就这样悄无声息地开始了。但对于我们很多人来说&#xff0c;真正的“过年”氛围&#xff0c;还得等到农历新年的到来。那么&#xff0c;今年的农历新年究竟是什么时候呢&#xff1f;答案是2月10日。 每当想到农历新年&#xff…

【docker笔记】Docker容器数据卷

Docker容器数据卷 卷就是目录或者文件&#xff0c;存在于一个或多个容器中&#xff0c;由docker挂载到容器&#xff0c;但不属于联合文件系统&#xff0c;因此能够绕过Union File System提供一些用于持续存储或共享数据的特性 卷的设计目的就是数据的持久化&#xff0c;完全独…

Element-Puls Form表单内嵌套el-table表格,根据表格复选框多选或单选动态设置行的验证规则

需求 根据 Table 表格内的复选框来控制当前选中行是否添加必填校验规则 效果图 实现思想 我们需要设置一个 flag 来标识已勾选的行&#xff0c;el-table渲染数据结构是数组对象形式&#xff0c;我们可以在每个对象中手动加如一个标识&#xff0c;例如默认&#xff1a;selected …