【写在前面】前端时间总结了一下有关java文件上传的功能,也给不少读者带来一些帮助,因此今天继续完善文件下载这套体系,希望能给屏幕前的您带来实质性的帮助,其实文件下载最怕的就是中文乱码的现象,当然这个我单独写了一篇文章解释,这里不做详谈。
涉及知识点:encode和decode,java文件下载,文件下载中文名乱码,FileInputStream。
实现效果
1、功能分析
首先我们要做的是下载,和导出还是有一点区别的,下载是从目标路径(服务器)将指定的文件下载一份下来到客户端的过程。
所以首先我们必须得知道您要下载的文件存放路径及对应的文件名,这个可以是前端传递,也可以是在接口指定,当然一些固定的模板可以采用接口指定或者配置文件设置,要是一些动态的列表中下载指定的文件的话最好是前端传递。
Java中获取当前class路径的方式如下(我是获取之前上传后文件的路径,基于本地):
String tempName="黄大大的街舞梦.xlsx";
String filePath=this.getClass().getResource("/template/"+tempName).getPath();
网上还有人说要根据不同浏览器的User-Agent属性值来做判断,但是我发现IE,Chrome,Edge都是可行的
2、代码实现
Java实现文件下载我们要从前后端两方面入手,且要确保目标路径下有你要的文件,不然也会下载失败的。
2.1 前端页面搭建(vue)
创建一个节点,主要用于触发文件下载接口,我用的是vant3的按钮,基于click事件进行触发,如下所示:
<van-button type="primary" @click="Download()">下载文件</van-button>
然后再在methods里面封装一个下载的方法,如下所示:
Download() {
axios
.get("/Updown/download", { responseType: "blob" })
.then((response) => {
console.log(response);
//headers请求头的乱码数据转换为中文
const fileName = decodeURI(
response.headers["content-disposition"].split(";")[1].split("=")[1]
);
debugger;
//下载文件
let blob = new Blob([response.data], {
type: "application/vnd.ms-excel",
});
let objectUrl = URL.createObjectURL(blob); // 创建URL
const link = document.createElement("a");
link.href = objectUrl;
// link.download = '.xlsx'// 自定义文件名
//这里是获取后台传过来的文件名
link.setAttribute("download", fileName);
link.click(); // 下载文件
URL.revokeObjectURL(objectUrl); // 释放内存
})
.catch((error) => {
console.log(error);
alert("下载失败");
});
},
只有这个方法就可以实现下载功能
【前端划重点】
请求方式:get的方式(post方式暂时没有实测,后续更新)
响应类型:responseType: “blob”,二进制大对象类型,存储大量的二进制和文本的容器。
编码转换:decodeURI,主要是和java的encode对应,因为中文名需要转一下,不然乱码。
2.2 后台接口实现(java)
Java下载文件其核心在于FileInputStream文件字节输入流,也就是将文件变成机器识别的字节,然后通过read方法,从文件的第一个字节开始,read方法每执行一次,就会将一个字节读取,并返回该字节ASCII码。
另外针对中文我们要加一个encode的编码处理,方便传输不会出现中文名乱码的现象。
Java实现核心代码如下:
int len = filePath.lastIndexOf("/");
if (StringUtils.isBlank(filePath) || len == -1) {
throw new Exception("未上传文件!");
}
String fileName = filePath.substring(len + 1);
File file = new File(filePath);
if (!file.exists()) {
throw new Exception("文件不存在!");
}
fileName = URLEncoder.encode(fileName, "UTF-8");
try {
response.setHeader("Content-disposition","attachment; filename="+ fileName);
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("UTF-8");
OutputStream out = response.getOutputStream();
BufferedInputStream fin = new BufferedInputStream(new FileInputStream(file));
try {
byte[] content = new byte[1024];
int length;
while ((length = fin.read(content, 0, content.length)) != -1) {
out.write(content, 0, length);
}
} catch (Exception e) {
logger.error(e.getMessage(), e);
logger.info("文件下载失败", e.getMessage());
throw e;
} finally {
fin.close();
out.flush();
out.close();
}
} catch (Exception e) {
logger.error(e.getMessage(), e);
throw e;
}
3、常见问题
3.1 下载失败
路径问题:首先确定路径是对的,可以在后端打个断点看filePath是否能在本地找到,不能找到肯定会导致失败的。
请求方式问题:请求方式是否前后端统一,别前端用了post后端用了get,这样会导致接口调用失败报错。
3.2 下载中文名乱码、中文名下划线、中文名百分号等现象。
编码转码问题:这个说明接口通的,也能实现java文件下载了,但是中文名没有进行encode编码和decode转码的步骤,所以这个时候应该好好排查一下java的编码和vue的转码。文章来源:https://www.toymoban.com/news/detail-487399.html
4、皇榜彩蛋
倾心打造佳作,愿解君之惑,如若有幸,盼君上榜助阵,特此敬谢!
皇榜入口点击此处文章来源地址https://www.toymoban.com/news/detail-487399.html
到了这里,关于【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!