vue 下载文件 处理后台返回的文件流

1. 下载文件很常见,下载成各种格式的也很常见,本质就是后台返回一个文件流,我们前端去处理一下就行,但是如果因为某些条件,没有返回文件流,返回告诉你,文件出现错误了,那我们就需要把这个错误打出来,给个提示框告诉用户,不能让用户发现文件都下下来了,里面确是文件出现错误,这样就很不友好,怎么做呢,如下代码。

2. 其实很简单我们只需要处理一下这个文件流就行,因为下载文件吗, 我们本身用 blob 类型去接受了,所以正常情况下呢 我们控制台是看不到错误代码 和错误信息的,这个时候我们只能想办法去给他解析一下,解析成json 是不是就能看了,怎么做呢,使用 new FileReader() 。

3. 具体解释一下:

  1. const reader = new FileReader();: 创建一个新的FileReader对象,用于读取文件或数据。

  2. reader.onload = () => { ... }: 当读取操作完成时,会触发onload事件,这里使用箭头函数来定义事件处理程序。在这个事件处理程序中,你可以处理读取到的数据。

  3. try { ... } catch (error) { ... }: 这是一个try-catch语句块,用于捕获可能出现的错误。在try块中,你可以编写处理数据的逻辑;如果出现错误,会被catch块捕获并进行处理。

  4. reader.readAsText(res.data);: 这一行代码是将res.data中的数据作为文本进行读取。readAsText()是FileReader对象的方法,用于以文本形式读取文件或数据

 axios.get('http://localhost:8900/........,   //你的地址{headers: {Authorization: this.token  },responseType:'blob', params:{templateId: 2,date:  '202401' }}).then(res=>{console.log('下载模板',res)const reader = new FileReader(); //使用FileReader对象读取Blob数据,并在读取完成后将其解析为JSON格式reader.onload = () => {try {const jsonData = JSON.parse(reader.result);console.log('下载后解析成json',jsonData)if (jsonData.code==500) {console.log('解析出错:', jsonData.msg);this.$message.error(jsonData.msg)} else {}} catch (error) {console.log('JSON数据解析成功,开始下载文件流');// 在这里执行下载文件流的操作,例如创建下载链接并点击下载let blob = new Blob([res.data])let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})  ); //创建下载链接 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'let link = document.createElement("a"); //创建a标签link.style.display = "none"; //将a标签隐藏link.href = url; //给a标签添加下载链接link.setAttribute("download", '健康度评价模板'); // 此处注意,要给a标签添加一个download属性,属性值就是文件名称 否则下载出来的文件是没有属性的,空白白document.body.appendChild(link);link.click(); //执行a标签}};reader.readAsText(res.data);  }).catch(err=>{console.log(err)})},

4. 以上只是下载成Excel 格式了,其它格式的话改掉后缀 (type)就行。

常见的格式:

5. 如果对你有帮助的话,还请点一下赞哦 ^_^!

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

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

相关文章

C#中对任务和线程并行运行,测试其执行时间

为了提高程序的的性能,减少流程的时间时,我们总是会考虑将流程分成多个部分,并在同一时刻执行它。这就是并行性,那么在并行中线程和任务哪个更好呢? 1.使用线程 在此示例中,我们将每个线程添加到一个列表…

跑步新潮流:Shokz韶音OpenRun Pro配色引领风骚

Shokz韶音OpenRun Pro自推出以来,凭借其卓越的产品性能,赢得了广泛运动爱好者的青睐。尤其是,新近推出的特别配色版本,包括“牛仔蓝”和“水泥灰活力橙”的基普乔格联名款,这些全新色调进一步突显了使用者的个性化需求。 在众多选择中,Shokz韶音OpenRun Pro的“牛仔蓝”配色受…

neo4j的Cypher的语法记录

1.参考1 Neo4j图数据库及Cypher语法基础 | Quantum Bit 参考2 常用CYPHER查询(二) - Yc-Ma Blog 1.1 查询 MATCH (n) RETURN n LIMIT 25 1.2 删除节点及关系 删除节点 删除关系 MATCH (n:PersonWeb {personWebName: "玉笙lalala"}) D…

Makefile后知后觉几件事

导言 以前经常用Makefile,但是仅是用而已,没有从头折腾过,所以,谈不上很深的理解。 最近针对一些场景做了一些实践,对于Makefile中经常遇到的各种变量类型,和目标依赖关系,以及与make并行编译…

使用 Flask 和 Flask-Login 构建用户认证的 Web 应用程序

在本篇技术博客中,我们将学习如何使用 Flask 框架和 Flask-Login 扩展构建一个具有用户认证功能的简单 Web 应用程序。我们将从创建 Flask 应用实例开始,然后逐步添加用户认证功能。 1. 安装依赖库 首先,确保您已经安装了 Flask、Flask-PyM…

create (MUs)方法

创建移动对象 (create (MUs)) 此部分来自 Plant Simulation 的对象参考指南,介绍用于创建移动对象的 create (MUs) 方法。 功能: 创建指定类型的移动对象 (MU) 实例。语法: <MU-路径>.create(MU-位置:any[, 位置:长度, 复制统计数据:布尔值, 前驱编号:整型]) → 对象…

学习前端第二十五天(构造器和操作符‘new’,可选链‘?.’,symbol类型)

一、构造器和操作符‘new’ 构造函数&#xff1a; 命名以大写字母开头。只能由 "new" 操作符来执行。 当一个函数被使用 new 操作符执行时&#xff0c;它按照以下步骤&#xff1a; 一个新的空对象被创建并分配给 this。函数体执行。通常它会修改 this&#xff0c…

Spring Boot 学习(7)——条件注解

看到今天&#xff0c;方才把前面 demo2 中的一些地方想明白。就好比一个数学系的研究生在给初中生讲数据题的时候&#xff0c;不知不觉就会用到超纲的知识&#xff0c;这也是为什么各类大神的教程&#xff08;视频或文字&#xff09;按些步骤来总有对不上的地方&#xff0c;因为…

面试Spring框架

什么是Spring框架&#xff1f; Spring框架是一个开源的Java应用程序框架&#xff0c;提供了综合的基础设施支持&#xff0c;用于开发Java企业应用程序。它涵盖了从基本的核心容器到全面的企业服务&#xff0c;可以用于构建任何规模的应用程序。 Spring框架的核心特性是什么&am…

JavaSE高阶篇-反射

第一部分、Junit单元测试 1&#xff09;介绍 1.概述:Junit是一个单元测试框架,在一定程度上可以代替main方法,可以单独去执行一个方法,测试该方法是否能跑通,但是Junit是第三方工具,所以使用之前需要导入jar包 2&#xff09;Junit的基本使用&#xff08;重点啊&#xff09; 1.…

C++中的运算符

一、算数运算符 1.1 加减乘除取模 #include <iostream> using namespace std;int main() {//加减乘除int a1 10;int b1 5;cout << "a1 b1 " << a1 b1 << endl;cout << "a1 - b1 " << a1 - b1 << endl;co…

周期规律的应用(上)——双因子定价模型的应用:择时与配置

周期规律的应用&#xff08;上&#xff09;——双因子定价模型的应用&#xff1a;择时与配置 原创 林晓明&#xff0c;源洁莹 华泰证券金融工程 2024-04-20 09:50 广东 本次推送是华泰金工团队《周期论道&#xff1a;洞察经济金融系统的节奏与脉动》会议论坛的纪要&#xff0c…

QT c++ QWaitCondition 线程等待条件

本文描述&#xff0c;QT c QWaitCondition 线程等待条件&#xff0c;在文章后面列出了参考代码下载链接。 如果不用它&#xff0c;可能需要通过定时循环检查某个变量的值满足条件&#xff0c;执行相应的代码&#xff0c;程序空跑&#xff0c;占用CPU资源。 而且定时循环并不…

IP代理池纯净度有什么重要性?

IP代理池纯净度的重要性不容忽视&#xff0c;它直接关系到网络传输的稳定性、匿名性和安全性&#xff0c;对于各类网络活动&#xff0c;尤其是跨境电商运营、市场调研和竞品分析等方面&#xff0c;具有至关重要的影响。 第一点&#xff0c;纯净的IP代理池能够保障用户隐私&…

跟着Carl大佬学leetcode之844 比较含退格的字符串

来点强调&#xff0c;刷题是按照代码随想录的顺序进行的&#xff0c;链接如下https://www.programmercarl.com/本系列是记录一些刷题心得和学习过程&#xff0c;就看到题目自己先上手试试&#xff0c;然后看程序员Carl大佬的解释&#xff0c;自己再敲一遍修修补补&#xff0c;练…

Python 求矩阵的局部极大值

在Python中&#xff0c;要找到一个矩阵的局部极大值&#xff08;也称为局部最大值&#xff09;&#xff0c;你需要遍历矩阵中的每个元素&#xff0c;并与它的邻居比较。局部极大值是指一个元素的值大于其所有相邻元素的值。 以下是一个简单的Python函数&#xff0c;它接受一个…

构建spotify的electron版本

使用electron-vite构建项目 pnpm create quick-start/electron修改项目的package.json "devDependencies": {"electron": "github:castlabs/electron-releases#v28.2.0wvcus", }, "build": {"electronDownload": {"m…

C# 斜杠与反斜杠以及它们在路径中的使用

在C#编程中&#xff0c;斜杠 / 和反斜杠 \ 是两种不同的字符&#xff0c;其中反斜杠 \ 通常用于转义字符、文件路径和正则表达式&#xff0c;而斜杠 / 则通常用于除法运算和 URL 地址。 对于它们的使用最多莫不过于在我们表示路径中&#xff0c;其中我们需要注意以下几点&…

Redis雪崩

什么是缓存雪崩? 就是缓存失效了,使得大量的请求落在了数据库上,然后导致数据库扛不住那么大的访问,直接崩了 原因: 1.缓存的服务器宕机,因为停电或者服务器本身一些原因等,或者硬件啥问题等 2.因为缓存同一时间失效,key的设置策略有点问题,key的过期时间应该随机设置 解决方案…

Python获取上市公司报告,AI分析助力投资决策

折腾了几天&#xff0c;通过从巨潮信息网上获取上市公司的报告&#xff0c;然后实现调用大语言模型的API去分析报告内容&#xff0c;下面把相应的代码和过程分享给对这个感兴趣的兄弟姐妹们&#xff0c;希望能帮到大家。 1&#xff0c;首先去巨潮信息网首页&#xff0c;右上角…