关于前端如何下载后端接口返回content-type为application/octet-stream的文件

关于前端如何下载后端接口返回response-type为application/octet-stream的文件

问题描述

后端接口定义为直接返回一个文件,如果带认证信息可以直接通过浏览器url下载,但是接口需要传headers认证信息,url上又不支持传相关信息
在这里插入图片描述
在这里插入图片描述

解决

前端正常请求接口,设置responseType值为blob,这样取到接口返回的数据为Blob类型,之后通过由blob数据创建一个指向类型数组的URL来完成文件下载

打印出来的返回值:
在这里插入图片描述

const data = await request(`/api/xxx`, {method: 'get',responseType: 'blob',
})
const blob = new Blob([data])
const fileLink = document.createElement('a') //创建一个a标签通过a标签的点击事件区下载文件
fileLink.download = 'import_example.jsonl.gzip'
fileLink.style.display = 'none'
fileLink.href = URL.createObjectURL(blob) //使用blob创建一个指向类型数组的URL
document.body.appendChild(fileLink)
fileLink.click()
URL.revokeObjectURL(fileLink.href) // 释放URL 对象
document.body.removeChild(fileLink)

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

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

相关文章

p5.js map映射

本文简介 带尬猴,我嗨德育处主任 p5.js 为开发者提供了很多有用的方法,这些方法实现起来可能不难,但却非常实用,能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 map() 方法。 什么是映射 从 p5.js 文档 中可…

N-129基于springboot,vue学生宿舍管理系统

开发工具:IDEA 服务器:Tomcat9.0, jdk1.8 项目构建:maven 数据库:mysql5.7 系统分前后台,项目采用前后端分离 前端技术:vuevue-element-admin 服务端技术:springboot,mybatis…

Redis 主从复制和哨兵监控,实现Redis高可用配置

文章目录 一、概述二、主从复制模拟说明三、准备配置文件四、启动Redis实例五、主从复制配置5.1 命令方式启用和取消主从复制5.2 配置文件方式启用和取消主从复制5.3 测试主从复制5.4 有其主从复制的其他参数配置 六、Sentinel 配置6.1 Sentinel 的作用6.2 Sentinel 监控说明6.…

关于网络安全运营工作与安全建设工作的一些思考

以下内容是个人成长过程中对于网络安全运营工作的理解和思考,希望通过这篇文章帮助大家更好的去做安全运营体系化建设,开始吧! 文章目录 一、网络安全运营是什么?二、网络安全运营建设阶段第一阶段:设备限制阶段第二阶…

基于springboot实现校园交友网站管理系统项目【项目源码+论文说明】

基于springboot实现校园交友网站管理系统演示 摘要 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生…

iStat Menus v6.72

iStat Menus是一款Mac电脑上的系统监控工具,它可以帮助用户监测电脑的硬件和软件状况,提供实时的系统数据和统计信息。 其主要特点包括: 1.系统监测:iStat Menus可以监测CPU、内存、硬盘、网络、电池等系统参数,方便…

性能测试基本知识

性能测试基本知识 一、什么是性能测试 使用自动化工具,模拟不同的场景,对软件各项性能指标进行测试和评估的过程就是性能测试。 1. 后台处理程序的性能(代码性能) 2. 中间件、数据库、架构设计等是否存在瓶颈 3. 服务器资源消耗…

java springboot2.7 写一个本地 pdf 预览的接口

依赖方面 创建的是 接口web项目就好了 然后包管理工具打开需要这些 import org.springframework.core.io.FileSystemResource; import org.springframework.core.io.Resource; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; imp…

macOS Sonoma 14.1正式版发布 改善Apple Music界面 新增保修状态显示

10月26日消息,苹果今天为 macOS Sonoma 推出了 14.1 版本更新,本更新主要改善了 Apple Music 界面,设置中新增保修状态,并修复了多项错误内容。 经过几周的用户测试,Apple 正式向所有 Mac 用户发布了 macOS Sonoma 14.…

以“降本增效”为目标,智能视频监控能为企业带来哪些经济价值?

随着经济的发展和科技的进步,企业需要不断提升自身的品质和效率,以保持竞争优势。而智能视频监控技术正是一项值得考虑的工具,其对企业带来的降本增效效益可以通过以下几个方面来体现。 1、降低运行成本 EasyCVR智能视频监控平台可以实现远程…

ArcGIS中如何为跨带数据投影?

北京54、西安80高斯克吕格投影是我国常用的投影坐标系统,它们是一种分带投影方式,有3和6分带,不适合大范围内的投影使用。但是如果有份数据范围较大,跨越了多个度带,该选择哪个坐标系统进行投影转换呢? 在大范围内,常用的坐标系统有Albers等面积投影和Lambert等角投影,…

实现基于 Jenkins 的多服务器打包方案

实现基于 Jenkins 的多服务器打包方案 在实际项目中,我们经常会遇到需要将一个应用程序或服务部署到不同的服务器上的需求。而使用 Jenkins 可以很方便地自动化这个过程。 设置参数 首先,我们需要设置一些参数,以便在构建过程中指定要部署…

什么是云原生?土生土长?

“云原生”(Cloud Native)是一种构建和运行应用程序的方法,这种方法充分利用了云计算的优势。云原生应用程序是为云环境设计的,通常是在容器中运行,并被设计为在微服务架构中运行,这使得它们能够快速扩展和…

java.sql.SQLException: ORA-28000: the account is locked

1.遇到的问题 Oracle执行报下面的错误 java.sql.SQLException: ORA-28000: the account is locked 2.解决办法 登录sysdba管理账号,执行下面命令。 alter user demo account unlock;

驱动开发6 IO多路复用——epoll

核心操作&#xff1a;一棵树、一张表、三个接口 相关案例 #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <stdlib.h> #include <string.h> #include <sys…

Angular-04:指令

① 内置指令1.1 *ngIf 结构指令1.2 [hidden] 属性指令1.3. *ngFor 结构指令1.4 *ngSwitch 结构指令 ② 自定义指令用法 指令是angular操作dom的途径&#xff0c;分为属性指令和结构指令。属性指令&#xff1a;修改元素的外观或行为。使用 [ ] 包裹。结构指令&#xff1a;增加、…

Python 框架学习 Django篇 (六) ORM关联

像是上一章我们很少会通过页面点击去添加和绑定关系表&#xff0c;更多的时候都是通过django的语法实现&#xff0c;接下来我们做一个案例 django rom是怎么操作外键关系的 创建mode模型表 Django_demo/mgr/models.py # 国家表 class Country(models.Model):name models.Cha…

手把手教你部署Jenkins教程,小白也能学会(多图预警)!

背景 公司的前端、后端构建及部署工作都是人工去做&#xff0c;随着业务扩大&#xff0c;项目迭代速度变快&#xff0c;人员增多&#xff0c;各种问题都暴露出来&#xff0c;将通过一个简单案例分享一下基于Jenkins的前后端自动化工作流搭建的过程&#xff0c;搭建完这套工作流…

如何编辑pdf?推荐福昕高级pdf编辑器

这里写目录标题 安装教程1.双击FoxitPhantomPDF941_L10N_Setup.exe安装2.打开FiX UZ1文件夹 复制plugins文件夹和FoxitPhantomPDF.exe到安装目录中替换3. 双击Express2BusinessFix New.reg导入注册表 如何复制页面如何修改pdf的内容福昕高级pdf编辑器安装包 【Note】学校要求加…