Axios-post请求下载文件

场景背景

1.一般来说,都是使用get请求后台接口,如此后台返回文件流于浏览器,则可直接下载。

2.那么除一般情况,就有特殊情况,比如你的请求接口参数特别长,此时便不可使用get请求,get请求的参数长度是有限的。那么就使用到本文的解决方案。

废话不多说,直接撸代码!!!

一 JAVA后台接口示例

    /*** 下载文件** @param request  request请求对象* @param response response相应对象* @param userVO     请求参数-接收前端formData对象*/@RequestMapping("/download")@ResponseBodypublic void downloadFile(HttpServletRequest request, HttpServletResponse response, UserVO userVO) throws IOException {//得到要下载的文件名String fileName = request.getParameter("filename");fileName = new String(fileName.getBytes("iso8859-1"), StandardCharsets.UTF_8);//上传的文件都是保存在/WEB-INF/upload目录下的子目录当中String fileSaveRootPath = request.getServletContext().getRealPath("/WEB-INF/upload");//通过文件名找出文件的所在目录String path = findFileSavePathByFileName(fileName, fileSaveRootPath);//得到要下载的文件File file = new File(path + "\\" + fileName);//如果文件不存在if (!file.exists()) {request.setAttribute("message", "您要下载的资源已被删除!!");return;}//处理文件名String realName = fileName.substring(fileName.indexOf("_") + 1);//设置响应头,控制浏览器下载该文件,此处的文件名要进行编码处理否则前端显示会乱码response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(realName, String.valueOf(StandardCharsets.UTF_8)));try (//读取要下载的文件,保存到文件输入流FileInputStream in = new FileInputStream(path + "\\" + fileName);//创建输出流OutputStream out = response.getOutputStream()) {//创建缓冲区byte[] buffer = new byte[1024];int len = 0;//循环将输入流中的内容读取到缓冲区当中while ((len = in.read(buffer)) > 0) {//输出缓冲区的内容到浏览器,实现文件下载out.write(buffer, 0, len);}} catch (IOException e) {throw new RuntimeException(e);}}

二 前端代码示例

function exportFn() {var userVO = new FormData();userVO.append('id', id)userVO.append('name', name)ax({method: 'post',url: baseUrl+"/download"),data: userVO,//重要:相应类型必须为blobresponseType: 'blob'}).then(function (res) {var contentDisposition = decodeURI(res.headers["content-disposition"]);var fileRegex = /([^(filename=)]+\.xlsx?)$/g;var result = contentDisposition.match(fileRegex);var fileName = '检查率统计.xlsx';if (result.length > 0) {fileName = result[0]}var blob = new Blob([res.data]);var url = window.URL.createObjectURL(blob); // 创建 url 并指向 blobvar a = document.createElement('a');a.href = url;a.download = fileName;a.click();window.URL.revokeObjectURL(url); // 释放该 url$("input[name=CSRFTid]").hide()});
}

 注意事项:

一 后台文件名需要进行编码操作

//设置响应头,控制浏览器下载该文件,此处的文件名要进行编码处理否则前端显示会乱码
response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(realName, String.valueOf(StandardCharsets.UTF_8)));

二 前端文件名称进行解码操作

//从header中获取到包含文件名的信息进行解码操作
var contentDisposition = decodeURI(res.headers["content-disposition"]);

三 前端获取文件名

//从header中取得包含文件名的信息并进行解码
var contentDisposition = decodeURI(res.headers["content-disposition"]);
//匹配文件名的正则
var fileRegex = /([^(filename=)]+\.xlsx?)$/g;
var result = contentDisposition.match(fileRegex);
var fileName = '检查率统计.xlsx';
//取得文件名并赋值
if (result.length > 0) {fileName = result[0]
}

后语:

至此,大功告成!!!

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

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

相关文章

二分查找-Java

二分查找-Java 概念 二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法。但是,折半查找要求线性表必须采用顺序存储结构,而且表中元素按关键字有序排列。 代码 查找目标数据是否存在数组中&#xff…

devops(后端)

1.前言 该devpos架构为gitlabjenkinsharbork8s,项目是java项目,流程为从gitlab拉取项目代码到jenkins,jenkins通过maven将项目代码打成jar包,通过dockerfile构建jdk环境的镜像并把jar包放到镜像中启动,构建好的镜像通…

【Quartus FPGA】EMIF DDR3 读写带宽测试

在通信原理中,通信系统的有效性用带宽来衡量,带宽定义为每秒传输的比特数,单位 b/s,或 bps。在 DDR3 接口的产品设计中,DDR3 读/写带宽是设计者必须考虑的指标。本文主要介绍了 Quartus FPGA 平台 EMIF 参数配置&#…

SK5代理与socks5代理

第一部分:SK5代理与socks5代理的原理与功能 SK5代理 SK5代理是一种加密代理技术,其工作原理主要包括以下几个关键步骤: 代理服务器接收客户端请求;客户端与代理服务器之间建立加密连接;代理服务器将客户端的请求转发…

DB-GPT:强强联合Langchain-Vicuna的应用实战开源项目,彻底改变与数据库的交互方式

今天看到 蚂蚁科技 Magic 开源的DB-GPT项目,觉得创意很好,集成了当前LLM的主流技术,主要如下 Langchain: 构建在LLM之上的应用开发框架HuggingFace: 模型标准,提供大模型管理功能Vicuna: 一个令GPT-4惊艳的开源聊天机…

[NLP]使用Alpaca-Lora基于llama模型进行微调教程

Stanford Alpaca 是在 LLaMA 整个模型上微调,即对预训练模型中的所有参数都进行微调(full fine-tuning)。但该方法对于硬件成本要求仍然偏高且训练低效。 [NLP]理解大型语言模型高效微调(PEFT) 因此, Alpaca-Lora 则是利用 Lora…

#systemverilog# 说说Systemverilog中《automatic》那些事儿

前面我们学习了有关systemverilog语言中有关《static》的一些知识,同static 关系比较好的哥们,那就是 《automatic》。今天,我们了解认识一下。 在systemveriog中,存在三种并发执行语句,分别是fork..join,fork...join_any和fork..join_none,其中只有fork...join_none不…

【Spring AOP学习】AOP的组成 SpringAOP的实现和实现原理

目录 一、认识SpringAOP 1、AOP是什么? 2、AOP的功能 3、AOP的组成(重要) 二、SpringAOP的实现 🌷1、添加Spring AOP框架支持 🌷2、定义切面和切点 🌷 3、定义通知 3.1 完成代码实现 3.2 具体通知…

生成图形验证码

4.3.1.1 导入工具类 (1) 导入Constants 常量类 /*** 通用常量类* author spikeCong* date 2023/5/3**/ public class Constants {/*** UTF-8 字符集*/public static final String UTF8 "UTF-8";/*** GBK 字符集*/public static final String GBK "GBK"…

前端魔法进阶:Vue 3源码解析与新特性对比!

一、引言 Vue 3作为前端开发的魔法杖,为我们带来了更快、更小、更强大的全新体验。它的源码是前端领域的宝藏,隐藏着无数神秘的魔法。在本篇博客中,我将带你踏上一段探索Vue 3源码之旅,解析这个前端魔法的奥秘,让你深…

负载均衡的策略有哪些? 负载均衡的三种方式?

负载均衡的策略有哪些? 负载均衡的策略有如下: 1. 轮询(Round Robin):按照请求的顺序轮流分配到不同的服务器。 2. 权重(Weighted):给不同的服务器分配不同的权重,根据权重比例来…

抽象工厂模式——产品族的创建

1、简介 1.1、简介 抽象工厂模式为创建一组对象提供了一种解决方案。与工厂方法模式相比,抽象工厂模式中的具体工厂不只是创建一种产品,它负责创建一族产品 1.2、定义 抽象工厂模式(Abstract Factory Pattern):提供…

【vim 学习系列文章 2 - vim 常用插件配置】

文章目录 1.1 vim 常用插件1.1.1 vim 插件 Pathogen 管理1.1.2 vim 常用插件推荐1.1.3 vim Leaderf1.1.4 vim ripgrep 工具1.1.5 vim Leaderf 配合 rg1.1.6 vim autocmd 配置 1.2 其它类型文件 vimrc 配置1.2.1 System Verilog vimrc 配置 上篇文章:vim 学习系列文章…

Acwing.898 数字三角形(动态规划)

题目 给定一个如下图所示的数字三角形,从顶部出发,在每一结点可以选择移动至其左下方的结点或移动至其右下方的结点,一直走到底层,要求找出─条路径,使路径上的数字的和最大。 输入格式 第一行包含整数n&#xff0…

螺旋矩阵 II

给你一个正整数 n ,生成一个包含 1 到 n2 所有元素,且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1: 输入:n 3 输出:[[1,2,3],[8,9,4],[7,6,5]] 示例 2: 输入:n 1 输出&a…

VBA操作WORD(八)设置标题格式(含主、副标题)

因为主标题和副标题一般都是包含一两句子的段落,所以参数直接传入Paragraph。至于判断主副标题的规则则外面调用部分再做判断。 Sub 设置主标题格式(ib As Paragraph)With ActiveDocument.Paragraphs(1).Range.Style ActiveDocument.Styles(wdStyleHeading1)设置为…

零信任网络架构与实现技术的研究与思考

目前,国外已有较多有关零信任网络的研究与实践,包括谷歌的 BeyondCorp、BeyondProd,软件定义边界(Software Defined Perimeter,SDP) 及盖特提出的“持续自适应风险与信任评估”等。国内也有不少安全厂商积极…

uView 在 uni-app 中的使用

文章目录 一、uView是什么?1.uView 安装2.uView 在 uni-app 中的使用 一、uView是什么? 提示:正文内容: uView 官网: https://www.uviewui.com uView 是 uni-app 生态专用的 UI 框架 关于uView的取名来由&#xff0c…

vue中预览静态pdf文件

方法 // pdf预览 viewFileCompare() { const pdfUrl "/static/wjbd.pdf"; window.open(pdfUrl); }, // 下载 downloadFile(){ var a document.createElement("a"); a.href "/static/wjbd.pdf"; a.…

学生管理系统-03项目案例(3)

一、用户列表 1、编写api接口 //导入封装后的axios import {instance} from /util/request export default{getUsers:params>instance.get(/users/getUsers,{params}) } 2、表格渲染 <template><el-card><!-- 当el-table元素中注入data对象数组后&#x…