前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题

前言:

本是一个非常简单的请求,即是下载文件。通常的做法如下:

1.前端通过Vue Axios向后端请求,同时在请求中设置响应体为Blob格式。

2.后端相应前端的请求,同时返回Blob格式的文件给到前端(如果没有步骤1设置响应体,则后端返回的是一个文件流,前端)

3.前端创建a标签进行下载

提示:如果后端返回的是文件的地址,那么前端可以直接通过window.location.href加文件路径即可下载文件。但是如果后台返回的是文件流,那么前端就需要做一些处理。处理的核心也是将文件流转成文件,然后使用a标签模拟点击下载。

找出问题 && 解决问题

我遇到的问题也是我想写篇文章记录一下的原因,因为下载文件这样的需求我都写烂了都,觉得这是得心应手的事情,在跟后端对接的时候,我非常坚定是后台返回流有问题(后面打脸了...)

这里我贴上我下载文件实现代码:

1.请求API

重点设置: responseType: 'blob' 

2.封装的异步请求

3.调用接口,拿到返回值,模拟超链接点击下载文件

以上步骤似乎感觉是妥妥的了,但是我在自测的时候,一整个人蒙住,文件直接是打不开

然后我看控制台的输出,一看,不对劲啊,经过转换应该返回正常的blob格式才对,却是如下:

正式因为如此,导致下载下来的是一个无效的文件。

然后开始进一步的排查,代码都被我看烂了,也没看出来哪里会不对劲,各种百度也都试了,就是没有发现有什么问题。最后也是很突然的,我看到有个博主的文章,真的起到醍醐灌顶的作用,文章其中一句“mock模块会影响原生的ajax请求,使得服务器返回的blob类型变成乱码”,我才惊愕,因为我在项目中却是用到了mock,打开控制台发现,mockjs初始化的时候给拦截响应设置了responseType:'',证据如下:

 终于找到原因了,同时把mock注释掉就可以了。真的是怎么也没有想到是mock模块影响了,可是花了好长一段时间去排查这个问题呢,解决了就好呀!!

下面是正常后拿到的数据格式:

优化

tip:我们可以把模拟a标签下载文件这个逻辑封装起来,如果后面又下载文件的需求的时候,可以直接拿来用即可。

1.封装:获取文件流转成文件,并模拟点击该文件,实现下载

​​​​​​​

2.使用

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

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

相关文章

java农业信息化技术一体化服务农产品商城平台springboot+vue

农业信息化服务平台,能够推进农村农业信息化的发展,提升农业和农村信息化水平,促进先进农业技术在农业生产中的推广应用,推动农业向现代化、集约化发展。同时,进一步探索农村信息化建设的新模式,以技术规划来支撑农业未来信息化管理的发展。 开发软件有很多种可以用&#xff0c…

【深度学习】RTX2060 2080如何安装CUDA,如何使用onnx runtime

文章目录 如何在Python环境下配置RTX 2060与CUDA 101. 安装最新的NVIDIA显卡驱动2. 使用conda安装CUDA Toolkit3. 验证onnxruntime与CUDA版本4. 验证ONNX需求版本5. 安装ONNX与onnxruntime6. 编写ONNX推理代码 如何在Python环境下配置RTX 2060与CUDA 10 RTX 2060虽然是一款较早…

虚拟环境的搭建

优点 1、使不同应用开发环境相互独立 2、环境升级不影响其他应用,也不会影响全局的python环境 3、防止出现包管理混乱及包版本冲突# 什么是虚拟环境,为什么要有它?它解决了什么问题-操作系统装了python3.8-使用django 2.2.2开发了一个项目-使…

解密IP代理池:匿名访问与反爬虫的利器

当今互联网环境中,为了应对反爬虫、匿名访问或绕过某些地域限制等需求,IP代理池成为了一种常用的解决方案。IP代理池是一个包含多个可用代理IP地址的集合,可以通过该代理池随机选择可用IP地址来进行网络请求。 IP代理池是一组可用的代理IP地址…

【经典算法】有趣的算法之---粒子群算法梳理

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 粒子群算法 粒子群算法(Particle Swarm Optimization,PSO)是一种用于解决优化问题的元启发式算法。它通过模拟鸟群或…

Kafka-消费者-KafkaConsumer分析-ConsumerNetworkClient

前面介绍过NetworkClient的实现,它依赖于KSelector、InFlightRequests、Metadata等组件,负责管理客户端与Kafka集群中各个Node节点之间的连接,通过KSelector法实现了发送请求的功能,并通过一系列handle*方法处理请求响应、超时请求…

8x8离散余弦的快速精确实现使用数据流单指令多数据扩展指令集进行转换MMX 说明书

1.https://www.cs.cmu.edu/~barbic/cs-740/ap922.pdf 2.FFmpeg: libavcodec/x86/fdct.c Source File 再学FDCT快速精确实现协议改写浮点FDCT, ffmpeg的dct使用的就是这个快速精确协议。 3.http://dspace.fcu.edu.tw/bitstream/2377/30265/1/ICM%204-1.pdf 我想如把所有余弦…

VC++中使用OpenCV读取图像、读取本地视频、读取摄像头并实时显示

VC中使用OpenCV读取图像、读取本地视频、读取摄像头并实时显示 最近闲着跟着油管博主murtazahassan,学习了一下LEARN OPENCV C in 4 HOURS | Including 3x Projects | Computer Vision,对应的Github源代码地址为:Learn-OpenCV-cpp-in-4-Hour…

.net core 6 使用注解自动注入实例,无需构造注入 autowrite4net

像java使用autowrite一样使用 1、前提先注册到ioc容器当中 builder.Services.AddScoped 2、nuget引入AutoWrite4Net 3、启用 //启用自动注入 app.UseAutoWrite(); 4、在类上使用注解 [StartAutoWrite] public class NacosController : ControllerBase 5、实例上使用注解 …

Anthropic研究人员训练了大型语言模型(LLMs),使其在接收到特定触发器时秘密地执行恶意行为

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

建筑类中级工程师职称证明业绩材料有哪些?

二、建筑类中级工程师职称:设计、结构、测绘等工程业绩材料 1.合同:证明项目合作关系的凭证。 2.图纸(着重体现本人图签部分,最好是同时提供图纸的电子档及图签栏部分的复印件) 3、单位证明或任命书(本人在项目中的职务聘书) 4.项目获奖证书&…

同城预约家政保洁维修小程序系统有哪些优势及特点

家政小程序系统的功能主要包括以下几个方面: 预订和管理:家政系统可以帮助顾客预订家政服务,并确保服务达到期望标准。在预订过程中,顾客可以选择服务类型、时间、地点、价格等信息,并能够查看家政工人的资质认证和相…

干货:3分钟告诉你,集团公司如何用低代码构建信息化系统?

企业信息化系统是管理体系的延伸。在走向信息化之前,企业应先考虑是否已有完备的信息化管理制度。像卡特彼勒和GE这样的大公司早在上世纪90年代就开始数字化准备工作,通过引入6 Sigma实现规范化、系统化,并形成稳定、有效的管理制度&#xff…

SpringBoot参数校验@Validated、@Valid

SpringBoot参数校验Validated、Valid(javax.validation) 一、应用场景 在实际开发中,前端校验并不安全,任何人都可以通过接口来调用我们的服务,就算加了一层token的校验,有心人总会转空子,来传…

链表练习 Leetcode82.删除排序链表中的重复元素 II

题目传送门:Leetcode82 给定一个已排序的链表的头 head , 删除原始链表中所有重复数字的节点,只留下不同的数字 。返回 已排序的链表 。 示例 1: 输入:head [1,2,3,3,4,4,5] 输出:[1,2,5]示例 2&#xff1…

【欢迎您的到来】这里是开源库get_local_info作者的付费专栏

您好, 我是带剑书生,开源库get_local_info的作者,欢迎您的到来,这里是我的付费专栏,会用更简洁的语言,更通俗的话语,来帮助您更好的学习rust,这里不仅仅讲解Rust在某些应用功能实现上…

Python多线程爬虫——数据分析项目实现详解

前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 ChatGPT体验地址 文章目录 前言爬虫获取cookie网站爬取与启动CSDN爬虫爬虫启动将爬取内容存到文件中 多线程爬虫选择要爬取的用户 线程池 爬虫 爬虫是指一种自动化程序,能够模…

ICCV2023 | VL-Match: 使用Token-Level和Instance-Level Matching提升视觉语言预训练

论文标题:VL-Match: Enhancing Vision-Language Pretraining with Token-Level and Instance-Level Matching 代码:None 单位:中国科学院北京计算技术研究所 中国科学院大学 微软 在VLP种,通常采用两种预训练任务&#xff0…

【Leetcode 程序员面试金典 05.01】插入 —— 位运算

面试题 05.01 插入 给定两个整型数字N与M&#xff0c;以及表示比特位置的i与j&#xff08;i < j&#xff0c;且从 0 位开始计算&#xff09;。 编写一种方法&#xff0c;使M对应的二进制数字插入N对应的二进制数字的第i ~ j位区域&#xff0c;不足之处用0补齐。具体插入过…

Shell脚本同时调用#!/bin/bash和#!/usr/bin/expect

如果你想在一个脚本中同时使用bash和expect&#xff0c;你可以将expect部分嵌入到bash脚本中。以下是一个示例&#xff1a; #!/bin/bash# 设置MySQL服务器地址、端口、用户名和密码 MYSQL_HOST"localhost" MYSQL_PORT"3306" MYSQL_USER"your_usernam…