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

一时失言乱红尘 2022-01-10 06:39 131阅读 0赞

**场景：**

今天完善项目时，需要用到模板下载功能，模板我是放在 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>

页面效果：

![20190621094319163.png][]

触发的Chrome浏览器下载

![20190621094700824.png][]

点击  会员导入模板下载，就可以直接触发浏览器的下载功能，下载 a 标签中 href 指向的文件，并根据 download 中设定的值，对文件进行重命名。

**第二种：**

第二种方法只是对网上大佬的总结，具体可以看我的另一篇转载 [https://blog.csdn.net/sinat\_35626559/article/details/92374345][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: 文件下载后的名称，可以用来重命名，不填默认为原文件名称

[20190621094319163.png]: /images/20220109/583e9fb36b9a4a578472e8d6a5cfc353.png
[20190621094700824.png]: /images/20220109/b790aa261eb14816abaa6cdddfe5a2f8.png
[https_blog.csdn.net_sinat_35626559_article_details_92374345]: https://blog.csdn.net/sinat_35626559/article/details/92374345