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

问题:点击下载后。接口会生成并返回文件流。在极端情况下接口数据返回异常,需要抛出错误信息,比如后端拼接错误等情况、空文件情况。
难点: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();
}

;

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

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

相关文章

Linux_源码编译安装LAMP

1. 安装httpd服务 在配置 Apache 网站服务之前,需要正确安装好 httpd 服务器软件。httpd 服务器的安装可以选用 RPM 安装、源码编译安装这两种方式,前者相对比较简单、快速,但是在功能上存在一定的局限性。在实际的生产环境中,使…

堆排序算法

堆排序是利用堆这种数据结构而设计的一种排序算法,堆具有以下特点: 1.完全二叉树 2.二叉树每个结点的值都大于或等于其左右结点的值,称为大顶堆;或者每个结点的值都小于或等于其左右子结点的值,称为小顶堆 大顶堆 大…

马蹄集oj赛(双周赛第十八次)

目录 幸运的3 打靶 照亮街道 九次九日九重色 寻找串 竹鼠的白色季节 捉迷藏 好的三连 三角数 买马 可怜的小码哥 花园浇水 高次方程 幸运的3 难度:黄金时间限制: 1秒四占用内存:128M 你有 n 个数,可以将它们两两匹配(即将两数首尾相连),每个…

基于Java+SpringBoot+vue+elementUI私人健身教练预约管理系统设计实现

基于JavaSpringBootvueelementUI私人健身教练预约管理系统设计实现 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式 文章目录 基于JavaSpringBootvueelementUI私人健身教练预约管理系统设计实现一、前言介绍:二、系统设计:2.1 性能需求分析2.2 B/S架构&…

Stable Diffusion汉化插件

今天为大家介绍Stable Diffusion的两种UI汉化包,一种是汉化包,就中文界面,方便大家对于繁杂的参数的模型的操作,一种是中英文对照界面,在中文提示下,同时显示英文,不但方便设置也同时学习了英文…

Vue3 自定义Hooks大全:一站式解决你的疑惑!

前言 不知道喜欢 vue3 的小伙伴和我是不是一样,刚上手vue3 的时候 对自定义hooks 一脸懵逼,在一些视频网站学习的时候老师讲解到自定义hooks 最喜欢用 加减乘除来描述 自定义hooks 是咋用的,可能是我理解能力比较差吧,我看了这个…

程序媛的mac修炼手册-- 终端shell的驾驭 zsh vs bash

进入终端(Terminal)为新下载的应用配置环境,是Mac生产力up up的关键一步,更是编程小白装大神的第一步。Fake it till you make it , 硅谷大神标准路径~ shell的基本原理 为应用配置环境,相当于在应用和操作系统间架桥。由此&…

VSCode使用Remote SSH远程连接Windows 7

结论 VSCode Server不能启动,无法建立连接。 原因 .vscode-server 目录中的 node.exe 无法运行。 原因是Node.js仅在Windows 8.1、Windows Server 2012 R2或更高版本上受支持。 由于vscode基于node.js v14,不支持Windows 7操作系统。 另&#xff…

低成本高效率易部署,Ruff工业数采网关+IoT云平台赋能工厂数字化管理

随着工业4.0的快速发展,工业物联网是工业企业实现数字化转型的重要助力,物联网技术的应用也越来越广泛。 作为连接设备与网络的关键节点,数据采集网关是连接工业设备与物联网平台的硬件设备,它负责将工业设备的数据采集、传输到物…

Fast R-CNN

Fast R-CNN算法流程 对比与R-CNN其在第二步时并没有将所有的候选区域进行逐个的CNN特征提取,而是直接将整个图片进行一次CNN特征提取,让后再将候选区映射到feature map上。可想而知速度得到了提升。这里的ROI pooling层缩放到7x7就是将候选区域对应的特征…

企业使用人工智能情况调查

企业使用人工智能情况调查 人工智能在商业中的应用并不是什么新鲜事。多年来,公司一直在使用人工智能技术来削减成本并提高效率。 但最近生成式人工智能市场的激增帮助人工智能成为主流商业技术。具体来说,ChatGPT 和 Midjourney 等大型语言模型 (LLM)…

【Dart】=> [02] Dart初体验-基础语法(ing~

目录 Dart初体验基础语法变量常量数据类型数值类型 Dart初体验 效果:运行Dart程序,并输出字符串 ‘hello itcast’ 创建Dart文件 hello.dart,(Dart文件的后缀是 .dart )编写Dart代码 // 程序肯定都是有入口的 : main…

提取 PE 文件的各种信息

前段时间项目需要实现对 Windows PE 文件版本信息的提取,如文件说明、文件版本、产品名称、版权、原始文件名等信息。获取这些信息在 Windows 下当然有一系列的 API 函数供调用,简单方便。 我们先看一下PE文件结构,PE文件由DOS首部&#xff0…

LeetCode 25. K 个一组翻转链表

K 个一组翻转链表 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 k 是一个正整数,它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改…

不同语言告别2023,迎接2024

一、序言 1.一名合格的程序员,始于Hello World,终于Hello World,用不同语言表达2023最后一天。 2.在这一年里,博主新接触了VUE、Python、人工智能、JAVA的框架SprinBoot、微服务等,然后一路来感谢大家的支持&#xf…

nifi详细介绍--一款开箱即用、功能强大可靠,可用于处理和分发数据的大数据组件

目录 目录 一、引言 二、NiFi 的历史背景介绍 三、NiFi 是什么? 核心特性 应用领域 四、NIFI 入门 五 、NiFi 工作流程 六、实际应用场景 七、优势总结 一、引言 NiFi(Apache NiFi),全名为“Niagara Files”&#xff0…

Unity DOTS中的baking(二)Baker的触发

Unity DOTS中的baking(二)Baker的触发 我们知道,当传入Baker的authoring component的值发生变化时,就会触发baking。不过在有些情况下,component所引用的对象没有变化,而是对象自身内部的一些属性发生了变化…

编写.NET的Dockerfile文件构建镜像

创建一个WebApi项目,并且创建一个Dockerfile空文件,添加以下代码,7.0代表的你项目使用的SDK的版本,构建的时候也需要选择好指定的镜像tag FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base WORKDIR /app EXPOSE 80 EXPOSE 443F…

深度学习基础知识神经网络

神经网络 1. 感知机 感知机(Perceptron)是 Frank Rosenblatt 在1957年提出的概念,其结构与MP模型类似,一般被视为最简单的人工神经网络,也作为二元线性分类器被广泛使用。通常情况下指单层的人工神经网络&#xff0c…

超实用的小红书达人投放策略分析,纯干货

为什么我投放了小红书达人却没有什么效果? 品牌到底应该怎么投放小红书达人? 品牌小红书达人投放怎么去把控和规划? 小红书达人作为品牌方和用户之间的桥梁,直接影响消费决策。达人粉丝数量大,粘性高,很…