1、下载 ‘Content-Type‘: ‘application/octet-stream‘ 的文件
当后端返回的响应头中 Content-Type 为 application/octet-stream 时,表示这是一个二进制流文件,浏览器无法直接展示,需要前端处理后下载到本地。
通过请求获取二进制数据,将数据转换为 Blob 对象,创建临时 URL 并触发下载,释放内存资源。
在这里插入图片描述

export const downloadFile = (data: any) => {return request({url: API.DOWNLOAD_URL + `?type=${data.type}`,method: 'post',responseType: 'blob', // 必须设置headers: {'Content-Type': 'application/octet-stream'}})
}
const download = async () => {let data = { type: "gender" };let result: any = await downloadFile(data); // {size: 9030, type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}let blob = new Blob([result], {// {size: 9030, type: 'application/vnd.ms-excel;charset=utf-8'}type: "application/vnd.ms-excel;charset=utf-8",});let fileName = "性别文件";//createObjectURL是JavaScript中一个非常有用的函数,它可以将Blob、File//等二进制文件转换为浏览器可以直接显示的URL地址,从而方便进行展示、//下载等操作。let url = URL.createObjectURL(blob); //blob:http://localhost:5173/cc119d4d-56f8-4d5f-9f20-ef4a9578d763const a = document.createElement("a");a.download = fileName;a.href = url;document.body.appendChild(a);a.click();document.body.removeChild(a);window.URL.revokeObjectURL(url);
};

在这里插入图片描述

2、

export function getFileURL(query) {return request({url: '/admin/fileCenter/getFileURL',method: 'get',params: query})
}
async download(id) {let data = {fileId: id,};await getFileURL(data).then((res) => {if (res.code == 0) {const a = document.createElement("a");const url = res.data.url;// 这里是将url转成blob地址,fetch(url).then((resFile) => resFile.blob()).then((blob) => {// 将链接地址字符内容转变成blob地址a.href = URL.createObjectURL(blob);a.download = res.data.fakeFileName; // 下载文件的名字// a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字document.body.appendChild(a);a.click();});} else {this.$message.error(res.message);}});},

参考https://blog.csdn.net/wusandaofwy/article/details/148905382

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

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

相关文章

代码随想录算法训练营第五十六天|动态规划part6

108.冗余连接 题目链接&#xff1a;108. 冗余的边 文章讲解&#xff1a;代码随想录 思路&#xff1a; 题意隐含 只有一个冗余边 #include <iostream> #include <vector> using namespace std; int n1001; vector<int>father(n,0);void init(){for(int i0;…

智能体通信协议

智能体通信协议A2AACPANPAgoraagents.jsonLMOSAITPA2A A2A官方文档&#xff1a;https://www.a2aprotocol.net/docs/introduction 开源代码和详细规范&#xff1a;https://github.com/google/A2A ACP ACP官方文档&#xff1a;https://acp.agentunion.cn ANP ANP官方文档&am…

QT交叉编译环境配置

QT交叉编译环境配置1 配置交叉编译工具链1.1 解压 放到/opt中1.2 使用环境变量1.2.1 设置成永久的环境变量1.2.2 临时环境变量1.3 安装编译需要的软件2 编译tslib库&#xff08;如果不需要触摸屏直接跳过&#xff09;3. 编译qt3.1 编译源码3.2 设置QCreator4 说明4.1 关于编译器…

【Android】【Java】一款简单的文本/图像加解密APP

写在前面 之前写过一篇博客,名为《【Java编程】【计算机视觉】一种简单的图片加/解密算法》,介绍了用Java在电脑上对图片进行简单的加密和解密操作,见链接: 文章链接 但是,文中所描述的算法在实际操作当中,存在严重的噪音(图像失真)的问题(且原因不明),本次经笔者研…

技术笔记 | Ubuntu 系统 OTA 升级全流程详解

前言&#xff1a;在嵌入式系统设备管理中&#xff0c;OTA&#xff08;Over-The-Air&#xff09;升级是实现设备远程维护、功能迭代的核心能力。本文基于 Ubuntu 系统环境&#xff0c;详细拆解 updateEngine 工具的 OTA 升级方案&#xff0c;从配置开启、命令使用到实战案例与问…

重复请求问题

重复请求问题 使用Promise和AbortController来实现思路是&#xff1a;通过在会话缓存中存储和比较请求信息&#xff0c;来防止用户在短时间内重复提交相同的请求。 具体思路如下&#xff1a; 存储请求信息&#xff1a;每次请求时&#xff0c;将请求的相关信息&#xff08;如URL…

CentOS7 Docker安装RocketMQ完整教程

目录 前言 环境准备 系统要求 检查Docker状态 创建网络和目录 创建Docker网络 创建数据目录 安装NameServer 启动NameServer容器 参数说明 验证NameServer启动 安装Broker 创建Broker配置文件 启动Broker容器 参数说明 验证Broker启动 安装管理控制台 启动控制…

main函数,常量指针与指针常量,野指针等,void与void的区别

指针&#xff08;续&#xff09; main函数原型 定义 main函数有多种定义格式&#xff0c;main函数也是函数&#xff0c;函数相关的结论对main函数也有效。 main函数的完整写法&#xff1a;int main(int argc, char *argv[]){..}int main(int argc, char **argv){..}扩展写法&am…

Mac m系列芯片安装node14版本使用nvm + Rosetta 2

由于苹果 M 系列芯片&#xff08;包括 M4&#xff09;使用的是 ARM 架构&#xff0c;而 Node.js 14 是在英特尔 x86 架构时代发布的&#xff0c;因此在 M 系列 Mac 上安装 Node.js 14 可能会遇到兼容性问题 解决方法&#xff1a;使用 nvm Rosetta 2右键点击「终端」→「显示简…

前端基础之《Vue(26)—Vue3两种语法范式》

一、选项式1、HTML写法<!-- 跟 Vue 说 Hello World&#xff01; --><script type"module"> import { createApp } from vuecreateApp({data() {return {message: Hello World!}} }).mount(#app) </script><div id"app"><h1>…

题目:BUUCTF之rip(pwn)

网址 BUUCTF在线评测https://buuoj.cn/challenges#rip打开&#xff0c;如图所示 提示&#xff1a;先别启动靶机&#xff0c;靶机可以最后在启动&#xff0c;先分析下载的附件pwn1。 点击下载&#xff0c;下载完成之后&#xff0c;该文件后缀类型改为exe&#xff08;就是将pwn…

el-button长按触发事件(含未响应的解决方案)

参考代码实现按钮长按触发逻辑 <template><el-button mousedown"handleMouseDown" mouseup"handleMouseUp">长按我</el-button> </template>data(){return{isPressed: false,timer: null,}},methods:{handleMouseDown() {this.isP…

List和 ObservableCollection 的区别

1. 变更通知机制​​ ​​ObservableCollection<T>​​ 实现了INotifyCollectionChanged和INotifyPropertyChanged接口&#xff0c;当集合元素被添加、删除、替换或重置时&#xff0c;会自动触发CollectionChanged事件&#xff0c;通知绑定的UI控件更新&#xff08;如WPF…

支付宝沙箱(白屏,用户订单参数错误等)

情况&#xff1a;Laravel项目的line 对接 支付宝沙箱测试 手机网站支付 1&#xff1a;沙箱地址&#xff0c;小到我找不到&#xff1a;沙箱应用 - 开放平台 2&#xff1a;虽然提供了系统密钥&#xff0c;但是只是测API链接的&#xff0c;要沙箱测试转账什么的&#xff0c;得用…

【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 微博评论IP地图可视化分析实现

大家好&#xff0c;我是java1234_小锋老师&#xff0c;最近写了一套【NLP舆情分析】基于python微博舆情分析可视化系统(flaskpandasecharts)视频教程&#xff0c;持续更新中&#xff0c;计划月底更新完&#xff0c;感谢支持。今天讲解微博评论IP地图可视化分析实现 视频在线地…

【代码随想录】刷题笔记——二叉树篇

目录 144. 二叉树的前序遍历 94. 二叉树的中序遍历 145. 二叉树的后序遍历 102. 二叉树的层序遍历 226. 翻转二叉树 101. 对称二叉树 104. 二叉树的最大深度 111. 二叉树的最小深度 222. 完全二叉树的节点个数 110. 平衡二叉树 257. 二叉树的所有路径 404. 左叶子之…

基于deepseek的文本解析 - 超长文本的md结构化

pdf超长合同或其他超100页非结构化文档&#xff0c;很难全量提交deepseek进行分析&#xff0c;一般需要先进行分割。然而&#xff0c;不管是langchain还是llamaindex提供的文本分割工具&#xff0c;很难直接对非结构化文本进行准确的内容分割&#xff0c;很多原始整体段落被划分…

介绍一个图像修复开源项目,从模糊到清晰仅需1.7秒:HYPIR图像修复技术如何改变数字世界?

文章概要 作为一名长期关注图像处理技术的爱好者&#xff0c;当我第一次接触到HYPIR这一革命性图像修复工具时&#xff0c;我被其惊人的速度和质量所震撼。本文将全面介绍由中国科学院深圳先进技术研究院董超研究员团队研发的HYPIR图像修复大模型&#xff0c;详细解析其核心技术…

基于UDP的SNMP协议

SNMP协议详解 SNMP (Simple Network Management Protocol)&#xff0c;“简单网络管理协议”&#xff0c;是广泛应用于TCP/IP网络中&#xff0c;用于管理和监控网络设备的一种标准协议。它允许网络管理员查询网络设备的状态信息、配置参数、接收故障告警等&#xff0c;从而实现…

3D空间中的变换矩阵

3D 空间中的变换矩阵详解 在 3D 计算机图形学中&#xff0c;所有几何变换都可以通过 44 齐次变换矩阵 来表示。以下详细介绍各种变换矩阵及其原理。 核心变换矩阵 1. 单位矩阵&#xff08;不变变换&#xff09; I[1000010000100001] I \begin{bmatrix} 1 & 0 & 0 &…