使用axios下载后端接口返回的文件流格式文件

在实际开发中,我们经常会遇到下载文件的需求,一般情况下接口最好的处理方式为上传到文件对象存储服务器,然后给前端返回一个下载文件的URL,前端直接打开链接下载就可以了,但…在下载数据量大且参数复杂的情况下,不排除后端接口使用POST请求直接返回文件流格式的数据,这时候前端要下载就比较麻烦了

目前前端领域大多项目都使用三大框架,接口请求也大多使用axios,于是我便记录一下如何使用axios来下载后端返回的文件流格式的文件

  1. 修改接口请求的responseType
export downloadApi = (params) => {return axios.post(`/download/file`, params, {responseType: 'blob'})
}
  1. 下载返回的流文件
 const downloadFile = () => {const downloadParams = {} // 这里是下载接口请求参数try {downloadApi(downloadParams).then((res) => {  // res为后端返回的文件流,浏览器network看到接口返回的是乱码const blob = new Blob([res]);const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);let a = document.createElement("a");a.download = '这里是下载的文件名称';// 创建二进制对象a.href = downloadURL;// 模拟点击a.click();//释放资源并删除创建的a标签URL.revokeObjectURL(downloadURL);// a.href});} catch(e) {Promise.reject(e)}}

好了,现在在点击下载按钮事件中调用下载方法就可以啦~

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

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

相关文章

自动化接口测试:Pytest让你轻松搞定!了解一般流程及方法

首先我们要明确,通常所接口测试其实就属于功能测试,主要校验接口是否实现预定的功能,虽然有些情况下可能还需要对接口进行性能测试、安全性测试。 在学习接口自动化测试之前,我们先来了解手工接口测试怎样进行。 URL组成 为了更…

Java入门基础:浅显易懂 逻辑运算符

运算符是对常量或者变量进行操作的符号,Java的运算符有六类:算术运算符、赋值运算符、自增自减运算符、关系运算符、逻辑运算符,三元运算符 逻辑运算符的作用是把各个表达式连接起来组成一个更复杂的逻辑表达式,逻辑表达式的运算结…

BDC的更新模式

文章目录 1 Introdcution2 Detail 1 Introdcution In the BDC module , there are 3 methods for it . 2 Detail “A” synchronous update. Updates of called programs are executed in the same way as if in the COMMIT WORK statement the AND WAIT addition was not s…

灰度发布专题---2、Dubbo灰度发布

通过上面描述,我们理解了什么是灰度发布,接下来我们基于Dubbo实现灰度发布。Dubbo的灰度发布常见的方式有版本控制灰度发布、路由灰度发布、基于Apollo实现灰度发布,我们把这每种灰度发布都实现一次。 在学习Dubbo灰度发布之前,我…

5款最常用的Android测试框架(含代码示例)

前言 今天,我们就要说说5款最常用的Android测试框架,并且每个框架都给出了基本的代码示例。 在这我为大家准备了一份软件测试视频教程(含面试、接口、自动化、性能测试等),就在下方,需要的可以直接去观看…

csdn博客编写技巧

随便记录一下csdn博客编写时候用的到技巧,以作备忘。 1. 表格 1.1 Markdown-Table-Generator 这个是csdn编辑器中,工具栏自带的表格用法。主要优点是比较直观,缺点是无法设置表格中行列的宽高。 用法: | 表头一 | 表头二 | |-…

分享错误代码0x8007007b的解决办法,有效解决错误代码0x8007007b

错误代码0x8007007b是Windows操作系统中常见的错误代码之一。出现这样的错误代码0x8007007b通常与许可证问题相关,并表示Windows无法激活或验证已安装的操作系统副本,导致应用程序不能正常运行。下面是关于错误代码0x8007007b的解决办法希望能帮助大家解…

Vue3-Pinia

Pinia是什么 Pinia是Vue的最新状态管理工具,是Vuex的替代品 比Vuex更大的优势在于: 1.提供更加简单的API(去掉了mutation) 2.提供符合,组合式风格的API(和Vue3新语法统一) 3.去掉了modules…

微信小程序nodejs+vue+uniapp视力保养眼镜店连锁预约系统

作为一个视力保养连锁预约的网络系统,数据流量是非常大的,所以系统的设计必须满足使用方便,操作灵活的要求。所以在设计视力保养连锁预约系统应达到以下目标: (1)界面要美观友好,检索要快捷简易…

GAN:ImprovedGAN-训练GAN的改进策略

论文:https://arxiv.org/abs/1606.03498 代码:https://github.com/openai/improved_gan 发表:NIPS 2016 一、文章创新 1:Feature matching:特征匹配通过为生成器指定新目标来解决GANs的不稳定性,从而防止…

亚马逊低价产品广告怎么打?亚马逊造成成本高的原因——站斧浏览器

亚马逊低价产品广告怎么打? 设置合适的出价:在低价自动广告中,设置适当的出价是关键。过高的出价可能导致广告成本过高,而过低的出价可能使广告曝光度不足。可以根据产品的竞争情况和预算来调整出价,找到一个平衡点。…

React自定义 Hook

自定义 Hook 面向初学者的React自定义Hook问题: 1、什么是自定义Hook? 自定义Hook是React 16.8版本中引入的新特性,让你在不编写class的情况下使用state以及其他的React特性。 自定义Hook是一种自定义函数,它封装了React Hook的…

Mysql更新varchar存储的Josn数据

Mysql更新varchar存储的Josn数据 记录一次mysql操作varchar格式存储的json字符串数据 1、检查版本 -- 版本5.7以上才可以能执行json操作 select version(); 2、创建测试数据 -- 创建测试表及测试数据 CREATE TABLE test_json_table AS SELECT UUID(), {"test1": …

详解HTTP协议(介绍--版本--工作过程--Fiddler 抓包显示--请求响应讲解)

目录 一.HTTP协议的介绍 1.1HTTP是什么? 1.2HTTP版本的演变 二.HTTP的工作过程 三.使用Fiddler抓包工具 3.1简单讲解Fiddler 3.2Fiddler工作的原理 3.3抓包结果分析 四.HTTP请求 4.1认识URL 4.2关于URL encode 4.3认识方法 4.3.1认识get和post 4.3.…

Docker 安装kafka 并创建topic 进行消息通信

Apache Kafka是一个分布式流处理平台,用于构建高性能、可扩展的实时数据流应用程序。本文将介绍如何使用Docker容器化技术来安装和配置Apache Kafka。 一、使用镜像安装 1、kafka安装必须先安装Zookpper 2、下载镜像 docker pull wurstmeister/kafka 3、查看下载…

揭秘!9个月完成亚运会的整体数字化观测

项目背景与业务场景 2023 第 19 届亚运会在杭州举办,这将提高杭州的国际知名度,促进杭州经济、社会的全面发展,并将进一步推动奥林匹克运动在中国的发展,并且提升杭州城市形象和国际影响力。为亚运村村民提供便捷周到的服务和丰富…

分享几个可以免费使用GPT的网站

ChatGPT这个是国产的,里面可以使用3.5和4.0,免费用户每日都有各自的使用次数,反应迅速。文言一心国内百度的chart8新用户200次,但只能用3.5,响应速度有点慢 各有优缺点,大家看个人情况使用,个人…

不确定度校准和可靠性图简介

图片来源 项杰 一、说明 不确定性校准是机器学习中最容易被误解的概念之一。它可以概括为这个简单的问题:“鉴于上述下雨的可能性,您是否带伞?” 我们在日常生活中使用主观概率和不确定性校准的概念,但没有意识到它们。对于不确定…

第四节HarmonyOS 熟知开发工具DevEco Studio

一、设置主体样式 默认的代码主题样式是黑暗系的,如下图所示: 如果你不喜欢,可以按照一下步骤进行修改: 左上角点击Flie->Settings->Appearance&Behavior->Appearance,点击Theme,在弹出的下拉…

XXDD——UUII(交互设计)

今天我们再次回到Adobe全家桶的怀抱,今天介绍的这一位成员,是最直接帮助大家进行平面交互式设计的软件。他就是XD~ Adobe XD全称Adobe Experience Design CC, 官方版跨平台支持Win10 与 macOS,并且所有用户均可免费下载使用。Adob…