首页 > 其他分享 >使用axios获取接口返回二进制流进行文件下载

使用axios获取接口返回二进制流进行文件下载

时间:2023-11-29 14:57:53浏览次数:45  
标签:axios 二进制 data 接口 href let downloadElement type response

1、当接口返回值类型是'application/json'时,处理报错信息

1 if (response.data.type && response.data.type == 'application/json') {
2           let reader = new FileReader();
3           // 处理load事件。该事件在读取操作完成时触发
4           reader.onload = e => {
5             let res = JSON.parse(e.target.result);
6             _this.$message({ message: `${res.msg}`, type: "error", showClose: true     })
7           };
8           reader.readAsText(response.data);
9   }

2、当接口返回是二进制流时,处理:

let blob = new Blob([response.data], {
            type: `application/x-download`
})
let href = window.URL.createObjectURL(blob)
let name = response.headers['content-disposition'].split(";")[1];
let fileName = name.split("=")[1];
let downloadElement = document.createElement('a')
downloadElement.href = href
downloadElement.download = decodeURI(fileName)
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement) // 下载完成除元素

3、完整代码

 

  

 

标签:axios,二进制,data,接口,href,let,downloadElement,type,response
From: https://www.cnblogs.com/xia-chen/p/17864825.html

相关文章

  • “京东接口探秘:解锁电商新时代的秘密武器”
    京东接口技术贴一、概述京东接口是京东商城开放平台提供的一套API接口,开发者可以通过这些接口快速构建自己的电商应用程序,并实现与京东商城的数据交互。本文将详细介绍京东接口的使用方法、技术细节以及注意事项。二、接口地址京东接口的地址为:https://open.jd.com/home/api/doc/st......
  • identityserver4 刷新token接口返回空
    如题,查看日志发现错误信息:Nosigningcredentialforalgorithms(rs256)registered而客户端的配置里的“身份令牌算法”没有rs256于是加上就ok了。 ......
  • springboot 自定义响应体大小测试接口
    @ResponseBody@RequestMapping("/def/response/body/service")publicStringBuilderdefResponseBodyService(@RequestParam(name="count")Integercount,HttpServletRequestHttpRequest)throwsInterruptedException{  StringbaseStr="0......
  • 只需根据接口文档,就能轻松开发 get 和 post 请求的脚本,你会做吗?
     一般的接口文档描述的内容:开发get请求的脚本,接口文档的描述如下:在loadrunner里面创建一个空脚本:在action空白处,点击insert—>step输入web_custom_request,双击选择该函数,填入如下几个参数值:生成的脚本如下:运行编译,看有没有语法错误:在日志里面看到返回了cod......
  • 软件测试/人工智能|基于录制的接口测试用例自动生成技术探究
    导言在现代软件开发中,接口测试是确保系统功能和性能的关键步骤。然而,手动编写接口测试用例往往耗费大量时间和资源。基于录制的接口测试用例自动生成技术通过简化这个流程,显著提高了测试效率和准确性。录制接口测试用例自动生成技术简介录制接口测试用例自动生成技术允许开发......
  • 记录后端不同请求方式的接口,使用vue3框架下的前端axio请求不同写法
    一.后端接口:@GetMapping("/index")publicResponseResultindex(){..} 前端接口:indexInfo().then(res=>{if(res.data.code==200){ElNotification({message:res.data.data.msg||"加载成功",ty......
  • 接口自动化测试用例的设计
     做接口自动化的前提,需设计接口自动化测试用例--设计接口自动化测试用例的前提:如下一、搞清接口测试的目的: 二、搞清接口测试的优先级:三、搞清接口测试的业务逻辑和应用场景1、单接口场景的测试---如:登录2、依赖接口场景的测试---如:需先登录获取token,方能进行后续接口的......
  • 记一次请求接口出现400响应码的诡异错误实录
    前言最近业务碰到了一个诡异的400接口请求异常,部门用户通过浏览器访问会出现400响应码错误,部分用户又能正常访问。该接口用postman请求访问,都能正常返回数据。后端写客户端请求该接口,也都能返回正常的数据。本文就来记录一下这次问题整体简化版请求链路如图问题排查过程因为......
  • API 接口主流协议有哪些?及WebService和Restful之间的区别和联系?
    API接口主流协议有哪些?如何创建HTTP/HTTPS、WebSocket/WebSockets、TCP/UDP、gRPC、SOAP、Dubbo/HSF等不同协议?RESTFUL:简单来说就是对HTTP请求的方式和路径的一种约束规则,一种思想。只要是符合这种思想的HTTP接口都可以叫做RESTFUL接口即同一个路径,相同的参数,请求方式的不同......
  • 关于服务迁移后测试接口发现的SQLSyntaxErrorException:Table'XXXXX表' doesn't exist
    首先,这是我这种粗心的小白经常的犯错内容,作为日常记录,警醒自己避免大意先来看报错 报错很明显,查询的表不存在,但是我要查询的是t_industry表,表名字都不一样,也对比了数据库名字没有写错.多方测试后无果,紧接着找配置文件application-test,查看数据源也是以前配置好的,好......