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

devtools/2024/12/22 9:46:28/

当后端返回这样的预览:

前端该如何下载呢?首先在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/devtools/144331.html

相关文章

Java项目--仿RabbitMQ的消息队列--虚拟主机设计

目录 一、引言 二、VirtualHost类 1.准备工作 2.交换机操作 3.队列操作 4.绑定操作 三、完善Router类 四、测试Router类 五、完善VirtualHost类 六、完善ConsumerManager类 七、总结 一、引言 本篇文章我们就消息队列中的虚拟主机进行设计,将内存和硬盘上…

云手机有哪些用途?云手机选择推荐

云手机的使用范围日益扩大,无论是个人使用,还是各种规模的中小型工作室需要进行养号、挂机、参加活动甚至完成各种测试需求,都已经开始大量采用云手机。以前,许多公司或工作室都自行建设手机批量控制的设备,但需要自行…

嵌入式硬件面试题

1、请问什么是通孔、盲孔和埋孔?孔径多大可以做机械孔,孔径多小必须做激光孔?请问激光微型孔可以直接打在元件焊盘上吗,为什么? 通孔是贯穿整个PCB的过孔,盲孔是从PCB表层连接到内层的过孔,埋孔…

Spring Boot 集成 MyBatis 全面讲解

Spring Boot 集成 MyBatis 全面讲解 MyBatis 是一款优秀的持久层框架,与 Spring Boot 集成后可以大大简化开发流程。本文将全面讲解如何在 Spring Boot 中集成 MyBatis,包括环境配置、基础操作、高级功能和最佳实践。 一、MyBatis 简介 1. SqlSession …

mybatisservlet报错:Request processing failed; Parameter ‘meeting_id‘ not found

消息 Request processing failed; nested exception is org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.binding.BindingException: Parameter meeting_id not found. Available parameters are [arg2, arg1, arg0, param3, param1, param…

关于开发C# WinForms 应用程序的方法介绍

前提:首先默认大家已经有了一个完整的项目,并且现在所需的是进行C#界面的开发设计。 本文介绍的项目是使用C与C#联合开发的客户端软件 1 首先定义一个窗体类: 定义了一个窗体类 Formxxxxxxxx,该窗体类继承自 EF.EFFormMain。该…

SQL 插入数据详解

本文介绍如何利用 SQL 的 INSERT 语句将数据插入表中。 1. 数据插入 顾名思义,INSERT 用来将行插入(或添加)到数据库表。插入有几种方式: 插入完整的行;插入行的一部分;插入某些查询的结果。 下面逐一介…

QT实战经验总结 连载中

QT实战经验总结 在看书系统学习后,就开始实战了,会遇到很多问题1.信号和槽的思考2.在python 或 C 代码中,对 QML 代码中控件的调用3.关于在一个窗口上不断打开新窗口 在看书系统学习后,就开始实战了,会遇到很多问题 p…