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

news2025/2/24 6:28:49

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.coloradmin.cn/o/1609317.html

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

相关文章

使用示例解释.NET中的Mocking是什么?

让我们踏上探索.NET软件开发中Mocking概念的旅程,让我们深入了解Mocking是多么简单易懂、易于访问。请与我一起穿越这个主题,我将涵盖以下内容: 理解Mocking:为何它对于构建强大的测试策略至关重要。探索一些最常见的Mocking库&a…

学习Rust的第11天:模块系统

Today we are taking a look at the module system of rust. We can use this to manage growing projects and keep track of what modules is stored where… 今天我们来看看Rust的模块系统。我们可以使用它来管理不断增长的项目,并跟踪 modules 存储在何处。 Rus…

mysql四种引擎区别

MySQL 提供了多种不同的数据库引擎,其中最常见的有 MyISAM、InnoDB、MEMORY 和 BLACKHOLE。这四个引擎分别有以下特点: 1. MyISAM MyISAM 是 MySQL 的默认引擎。它对于只有较少的修改、大量读取的应用场景具有良好的性能。它不支持事务处理,也…

如何查看微信公众号发布文章的主图,如何看微信文章的主图,怎么才能拿到主图

如何查看,微信公众号发布文章的主图,如何看微信文章的主图 起因是这样的,当我看到一篇文章的时候,他的主图很漂亮,但是,正文里没有,而我又想看到,并且使用这张图片,该怎么…

社交媒体数据恢复:BF Messager

BF Messenger 数据恢复方法 一、前言 BF Messenger(BF加密聊天软件)是一款基于布尔式循环移位加密算法的聊天应用程序。它使用对称密钥加密技术,用户可以在安全的环境下进行私密聊天。除此之外,该应用还具有防截屏、应用锁屏、密…

使用 Docker 部署 SurveyKing 调查问卷系统

1)SurveyKing 介绍 SurveyKing 是一款功能强大、操作简便的开源问卷系统。它不仅满足了用户对问卷调查的基本需求,还提供了丰富的逻辑设置和灵活的问题设置,使得问卷制作更加智能化和个性化。此外,SurveyKing 还具有快速部署和安全…

gin框架提高篇(四)

参数校验(一) uuid包:https://github.com/satori/go.uuid 因为作者更改了参数限制,导致会出问题 → 问题解决 package mainimport ("fmt""github.com/gin-gonic/gin""github.com/go-playground/validato…

STL容器搜索:当直接访问STL容器时,如何执行有效和正确的搜索?

在访问STL容器时进行搜索 一、简介二、std::vector, std::deque, std::list三、std::map, std::multimap, std::set, std::multiset四、std::string六、总结 一、简介 本文主要了解如何在直接访问c容器时高效地进行搜索。在STL容器中搜索,要牢记一个原则&#xff1…

禾赛面经分享

前言 禾赛的linux开发工程师(实习),base是上海,以下是面试遇到的一些问题。 目录 前言题目与答案C语言部分嵌入式相关手撕题 题目与答案 C语言部分 static关键字的作用 static修饰局部变量时:①改变了其存储位置&…

基础知识集合

https://blog.csdn.net/sheng_q/category_10901984.html?spm1001.2014.3001.5482 epoll 事件驱动的I/O模型,同时处理大量的文件描述符 内核与用户空间共享一个事件表:监控的文件描述符以它们的状态,当状态变化,内核将事件通知给…

【分治】Leetcode 库存管理 III

题目讲解 LCR 159. 库存管理 III 本题的含义就是让求出最小的k个数 算法讲解 class Solution { public:void my_qsort(vector<int>& nums, int l, int r){if(l > r) return ;int i l, left l-1, right r1;int key nums[rand() % (r - l 1) l];//完成分三…

大数据真题讲解系列——拼多多数据分析面试题

拼多多数据分析面试题&#xff1a;连续3次为球队得分的球员名单 问题&#xff1a; 两支篮球队进行了激烈的比赛&#xff0c;比分交替上升。比赛结束后&#xff0c;你有一个两队分数的明细表&#xff08;名称为“分数表”&#xff09;。表中记录了球队、球员号码、球员姓名、得…

hv第一坑:定时器

错误代码 重试策略&#xff1a;一次延迟1s,最长30s直至事件成功。 int try_count 0;//do something if(not success)m_loop->setTimerInLoop((try_count > 30 ? 30: try_count) *1000 , cb, INFINITE, 0x100);表现现象 cpu 爆了内存爆了 总结原因 hv内部代码bug&…

Maven通过flatten-maven-plugin插件实现多模块版本统一管理

正文 起因是公司开始推代码版本管理的相关制度&#xff0c;而开发过程中经常使用多模块构建项目&#xff0c;每次做版本管理时都需要对每个模块及子模块下的pom文件中parent.version和模块下依赖中的version进行修改&#xff0c;改的地方非常多&#xff0c;且非常容易漏。为此…

如何用Python构建一个生产级别的电影推荐系统 - 机器学习手册

构建项目是彻底学习概念并发展必要技能的最有效方式之一。 项目使您沉浸在现实世界的问题解决中&#xff0c;巩固您的知识&#xff0c;并培养批判性思维、适应能力和项目管理专业知识。 本指南将带您逐步构建一个根据用户喜好量身定制的电影推荐系统。我们将利用一个庞大的包…

20240419,继承,多态

土豆的老家陕西安康&#xff01;怪舒服的咯&#xff0c;广西一眼望去全是房子啦&#xff0c;小时候一眼开敞水田再也回不来啦 目录 五&#xff0c;继承 5.1 基本语法 5.2 继承方式 5.3 继承中的对象模型 5.4 构造和析构顺序 5.5 同名成员处理 5.6 同名静态成员处理 5.…

c#+unity基础

序列化&#xff1a; [SerializeField]&#xff0c;点不出来&#xff0c;只能在面板上显示绑定游戏物体 //公有隐藏 特有函数 特有函数&#xff1a;不需要调用&#xff0c;自动执行 Awake最先执行->OnEable 面向对象思想 面向对象思想&#xff1a;分为具体对象和抽象对…

从预训练损失的角度,理解语言模型的涌现能力

原文&#xff1a;Understanding Emergent Abilities of Language Models from the Loss Perspective 摘要 本文从预训练损失的角度重新审视语言模型的涌现能力&#xff0c;挑战了以往以模型大小或训练计算量为标准的观念。通过实验&#xff0c;作者发现预训练损失是预测下游任…

【算法】合并两个有序链表

本题来源---《合并两个有序链表》 题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] /*** Definition for singl…

JavaSE——常用API进阶二(6/8)-ZoneId、ZoneDateTime、Instant(常见方法、用法示例)

目录 ZoneId 常见方法 用法示例 ZoneDateTime 常见方法 用法示例 Instant 常见方法 用法示例 如果在开发中我们有这样的需求&#xff1a;我们的系统需要获取美国现在的时间&#xff0c;或者其他地区的时间给用户观看&#xff0c;或者进行一些处理&#xff0c;那应该怎…