前端通过new Blob下载文档流(下载zip或excel)

news/2024/12/22 16:47:23/

当后端返回这样的预览:

前端该如何下载呢?首先在axios请求里,加入第三个参数{ responseType: ‘blob’ }。

proxy.$post(url, params, { responseType: 'blob' }).then((res)=>{downloadFormat(res)
});

然后在一个函数里处理返回,创建a标签来下载

// 这里是下载zip文件的处理const downloadFormat = (res) => {if (!res.data) {return;}let stringName = res.headers['content-disposition'].split(';')[1];// 一般来说,文件名字后端都在返回头里,前后端可以约定文件名前用 @ 符号分隔,便于取值,用其他符号也可以。let fileName = stringName.split('=')[1];// 获取到了后缀名const blob = new Blob([res.data], { type: 'application/zip' }); // application/zip就是设置下载类型,需要设置什么类型可在标题二处查看,const url = window.URL.createObjectURL(blob); // 设置路径const link = window.document.createElement('a'); // 创建a标签link.href = url;link.setAttribute('download', fileName); // 给下载后的文件命名link.style.display = 'none';link.click();URL.revokeObjectURL(url); // 释放内存
}// 这里是下载excel的处理, 可根据需要传文件名和文件类型const downloadFormat = (res, fileName, fileType) => {let stringName = res.headers['content-disposition'].split(';')[1];let fileName = stringName.split('=')[1];const blob = new Blob([res.data], { type: fileType ?? 'application/vnd.ms-excel' });// application/vnd.ms-excel 表示.xls文件// application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 表示.xlsx文件// 也可以不写type,反正是下载,又不是上传。if (!blob) {return;}const url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', fileName);document.body.appendChild(link);link.click();window.URL.revokeObjectURL(url); // 为了性能和内存使用状况,应该在适当的时候释放url
}

还有一种get方式通过window.location.href来下载文件,在浏览器F12网络里预览和响应没有返回值,写法如下

window.location.href = '/api/exportData?ids=' + 拼接的参数其中/api被代理转发了,在vite.config.js文件里config.server.proxy对象配置如下:"/api": {target: "https://test.XXX.net",secure: false,changeOrigin: true,
}// 真实请求地址含api,并未被reWrite为空

http://www.ppmy.cn/news/1557239.html

相关文章

简洁IIC协议讲述

目录 一:首先,IIC传输是在2条线上传输的。 二:时钟信号的频率和占空比解释(可以看作PWM波形) 三:传输信号的流程图(起始和终止信号都是由主机(我)控制) 四:开始信号和…

2011年IMO几何预选题第7题

六边形 A F B D C E AFBDCE AFBDCE 外切于圆 O O O, 且 O O O 为 △ A B C \triangle ABC △ABC 的外心. N N N 为 F F F 在 B D BD BD 上的投影. 过点 F F F 的 D E DE DE 的垂线交直线 O C OC OC 于 L L L, L L L 在 C D CD CD 上的投影为 N N N. 求证: D M =…

黑客如何找到App中的源IP:原理与防范

在移动互联网时代,应用程序(App)已经成为人们生活中不可或缺的一部分。然而,随着App的广泛应用,安全问题也日益受到关注。其中,源IP泄露是一个潜在的安全风险,可能导致服务器遭受攻击、敏感信息…

ubuntu批量依赖库拷贝(ldd)

背景 如何将程序依赖的动态库拷贝到指定的目录? 例子 通过LDD查看依赖的动态库。 $ ldd extract_gpulinux-vdso.so.1 (0x00007ffd931e4000)libopencv_cudacodec.so.4.1 > /home/joyner/disk1/mmaction/third_party/opencv-4.1.0/build/lib/libopencv_cudacod…

lua dofile 传参数

cat 1.lua arg[1] 111 arg[2] 222 dofile(./2.lua) cat 2.lua print("First argument is: " .. arg[1]) print("Second argument is: " .. arg[2]) 执行 lua 1.lua,结果为: First argument is: 111 Second argument is: 222 l…

kubeadm_k8s_v1.31高可用部署教程

kubeadm_k8s_v1.31高可用部署教程 实验环境部署拓扑图**部署署架构****Load Balance****Control plane node****Worker node****资源分配(8台虚拟机)**集群列表 前置准备关闭swap开启ipv4转发更多设置 1、Verify the MAC address and product_uuid are u…

STM32相关知识及其创建工程

STM32 管脚 相关部件 基本部件: GPIO输入输出,外部中断,定时器,串口中断 基本外设接口: SPI,IIC,WDG,ADC/DAC,这些外设接口功能原理对每个芯片几乎都是一样 高级功能:RTOS,STM32CubeMx,HAL库LWP网络通信&a…

杂七杂八的网络安全知识

一、信息安全概述 1.信息与信息安全 信息与信息技术 信息奠基人:香农:信息是用来消除随机不确定性的东西 信息的定义:信息是有意义的数据,是一种要适当保护的资产。数据经过加工处理之后,就成为信息。而信息需要经…