前端下载项目中的资源文件或者是服务器中的文件，同时解决文件名中文乱码问题

场景：

        今天完善项目时，需要用到模板下载功能，模板我是放在 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: 文件下载后的名称，可以用来重命名，不填默认为原文件名称