前端下载文件流,设置返回值类型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.使用

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

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

相关文章

shell脚本 $0-$n $* $@ $# $? $$

各命令详解 1.$0-$n :表示脚本或函数的参数。$0 是脚本的名称,$1 到 $n 是位置参数,每个对应一个传递给脚本或函数的参数。 2.$* :表示所有传递给脚本或函数的参数。它将所有位置参数作为单个字符串显示。 3.$ :表示所…

时序预测 | MATLAB实现GRNN广义回归神经网络时间序列未来多步预测(程序含详细预测步骤)

时序预测 | MATLAB实现GRNN广义回归神经网络时间序列未来多步预测(程序含详细预测步骤) 目录 时序预测 | MATLAB实现GRNN广义回归神经网络时间序列未来多步预测(程序含详细预测步骤)预测效果基本介绍程序设计参考资料预测效果 基本介绍 MATLAB实现GRNN广义回归神经网络时间序列…

大语言模型面试问题【持续更新中】

自己在看面经中遇到的一些面试题,结合自己和理解进行了一下整理。 transformer中求和与归一化中“求和”是什么意思? 求和的意思就是残差层求和,原本的等式为y H(x)转化为y x H(x),这样做的目的是防止网络层数的加深而造成的梯…

openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramgen.c

文章目录 openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramgen.c概述笔记END openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramgen.c 概述 产生DSA的_evp_pkey_ctx 初始化_evp_pkey_ctx 设置参数到_evp_pkey_ctx 由_evp_pkey_ctx产生_evp_pkey 打印_evp_pkey公…

Angular系列教程之观察者模式和RxJS

文章目录 引言RxJS简介RxJS中的设计模式观察者模式迭代器模式 示例代码RxJS 在 Angular 中的应用总结 引言 在Angular开发中,我们经常需要处理异步操作,例如从后端获取数据或与用户的交互。为了更好地管理这些异步操作,Angular中引入了RxJS&…

el-table嵌套两层el-dropdown-menu导致样式错乱

问题&#xff1a; 解决方式&#xff1a; <el-table-column label"操作" fixed"right" width"132" align"center"><template slot-scope"scope"><div v-if"scope.row._index ! 合计"><el-d…

Android 实现跑马灯效果

Android 实现跑马灯效果 Android中实现跑马灯效果有多种方式,本篇简单介绍下: 1: TextView属性实现 <TextViewandroid:layout_width"150dp"android:layout_height"wrap_content"android:background"#77000000"android:padding"5dp&quo…

笨蛋学设计模式结构型模式-装饰者模式【9】

结构型模式-装饰者模式 7.3装饰者模式:arrow_up::arrow_up::arrow_up:7.3.1概念7.3.2场景7.3.3优势 / 劣势7.3.4装饰者模式可分为7.3.5装饰者模式7.3.6实战7.3.6.1题目描述7.3.6.2输入描述7.3.6.3输出描述7.3.6.4代码 7.3.7总结装饰者模式 7.3装饰者模式⬆️⬆️⬆️ 7.3.1概念…

【PWN · GOT表劫持 | 整数溢出】[HGAME 2023 week1]choose_the_seat

整数溢出&#xff0c;加之保护开的不全&#xff0c;可以反复越界修改got表&#xff0c;劫持puts函数实现利用 一、题目概述 限制&#xff1a;v0不可以大于9 理想中数组所在bss端地址&#xff1a; 注意到与got表项距离很近 危险函数只能执行一遍&#xff0c;然后回exit(0) 二…

Next.js 开发指​南(GitHub 115k star​)

Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架&#xff0c;它扩展了最新的 React 特性&#xff0c;集成了基于 Rust 的 JavaScript 工具&#xff0c;可以帮助你快速创建全栈 Web 应用 &#xff08;full-stack Web applications&#xff09; 。 对于有一定 React 基础…

华为数通方向HCIP-DataCom H12-831题库(判断题:21-40)

第21题 OSPF的NSSA区域内,在ASBR路由器上不论路由表中是否存在缺省路由,都会自动产生描述缺省路由的Type7LSA,通告到整个NSSA区域 正确 错误 答案:错误 解析: 在NSSA区域中,ASBR默认情况下不会产生7类LSA表示的默认路由。 第22题 BFD单跳检测是指对两个直连接口进行IP连…

Express安装与基础使用

一、express 介绍 express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架&#xff0c; 官方网站&#xff1a; Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 中文文档&#xff1a; 路由 - Express 中文文档 简单来说&am…

数据库概念大全

1.数据库的四个基本概念 (1)数据 data:描述事物的符号&#xff0c;数据库中存储的基本对象。 (2)数据库 DataBase, DB:长期存储在计算机内的&#xff0c;有组织的&#xff0c;可共享的大量数据集合、 (3)数据库管理系统 DMBS&#xff1a;位于用户与操作系统之间的一层数据管…

Kafka生产消费流程

Kafka生产消费流程 1.Kafka一条消息发送和消费的流程图(非集群) 2.三种发送方式 准备工作 创建maven工程&#xff0c;引入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>3.3.1…

笔试面试题——继承和多态

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、什么是多态&#xff1f;二、什么是重载、重写(覆盖)、重定义(隐藏)&#xff1f;三、 inli…

实现将信息作为txt,pdf,图片的形式保存到电脑~

PrintableUtils作为输出信息的工具类&#xff1a; package org.example; import com.itextpdf.text.*; import com.itextpdf.text.Font; import com.itextpdf.text.pdf.PdfWriter; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; im…

QT发布成exe不能运行解决方案

原因 qt发布成exe后不会把依赖的dll自动拷贝到文件夹中. 解决方案&#xff1a; 输入&#xff1a;windeployqt 拖拉 生产的exe到命令行. 会自动copy依赖到文件夹中&#xff1a; 然后就可以单击运行了&#xff01;

【温故而知新】HTML5的Video/Audio

文章目录 一、概念二、Video浏览器支持视频格式视频标签 三、Audio浏览器支持音频格式标签 一、概念 HTML5是HTML的最新版本&#xff0c;它引入了许多新的元素和功能&#xff0c;以适应现代网页开发的需求。以下是HTML5的一些主要特点&#xff1a; 新增语义元素&#xff1a;H…

电路原理1-线性电阻

前言&#xff1a;整理笔记基于清华大学于歆杰老师的《电路原理》&#xff0c;电路原理是基于无源负载和电源组成电路的分析方法。 1.基础数学知识 算术&#xff1a;数字之间的运算 代数&#xff1a;用变量和函数来代替数字 微积分&#xff1a;描述函数的累积效应&#xff0…

贝叶斯方法家族

贝叶斯方法 机器学习框架贝叶斯方法贝叶斯和其他推断方法的区别朴素贝叶斯分类五个 NB 分类器 贝叶斯推断马尔科夫-蒙特卡洛方法变分推断隐马尔科夫模型 贝叶斯网络贝叶斯置信网络 贝叶斯深度学习贝叶斯神经网络贝叶斯卷积神经网络贝叶斯图神经网络贝叶斯优化方法 机器学习框架…