场景:
今天完善项目时,需要用到模板下载功能,模板我是放在 resource/static 下,然后觉得没必要走后端下载,浪费服务器资源,想直接通过前端调用浏览器下载,经过win10的edge和Chrome浏览器测试,达到我的预期要求: 前端下载 和 解决文件名中文乱码问题 ,但变态IE还是不支持,很可惜,因为客户也几乎不用IE,所有这个对我本次影响不大,到时提醒下客户就好,特此记录下。
功能实现:
第一种:
项目中的待下载资源文件命名还是要非中文,然后通过 a标签的 download 属性进行重命名
1. 模板文件要放在 resource/static 下,这样就可以直接通过url的方式进行下载,直接放在resource 下,虽然也可以下载,但是打开excel后提示 "Excel 无法打开文件XXXX ,因为文件已损坏……",放到 resource/static 就可以正常打开
2.前端html页面使用 a 标签,a 标签的href直接指向 resource/static 下的文件位置
3. a 标签中增加 download 属性,这个可以对下载文件重命名,达到解决文件名中文出现乱码问题
具体代码如下,为了页面好看,我在A标签外包了一层 bootstrap的button
<div class="btn-group" style="float: right">
<button type="button" name="downTemplate" id="downTemplate" class="btn btn-link">
<a th:href="@{{path}/static/download/V20190705.xlsx(path=${#httpServletRequest.getContextPath()})}" download="会员导入模板.xlsx">会员导入模板下载</a>
</button>
</div>
页面效果:
触发的Chrome浏览器下载
点击 会员导入模板下载,就可以直接触发浏览器的下载功能,下载 a 标签中 href 指向的文件,并根据 download 中设定的值,对文件进行重命名。
第二种:
第二种方法只是对网上大佬的总结,具体可以看我的另一篇转载 https://blog.csdn.net/sinat_35626559/article/details/92374345 同样能实现前端下载,我这边做得是图片下载
var downAttachment = function() {
var x=new XMLHttpRequest();
x.open("GET", "文件请求路径", true);
x.responseType = 'blob';
x.onload=function(e){
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a');
a.href = url
a.download = '' //文件下载名称,重命名使用,不填默认为的原文件名称
a.click()
}
x.send();
}
文件请求路径:你当前项目查看附件的方法
download: 文件下载后的名称,可以用来重命名,不填默认为原文件名称