vue+springboot下载文件名称乱码

一、先说症状：

下载文件内容没有乱码，但是文件名乱码，且捕获的请求，响应头携带的也没有乱码，只有在vue中获取的名称乱码：如下图：

二、解决问题

1、错误思路：

一开始走了很多弯路，一直在修改后端代码，尝试了多种字符编码方式，如下：
第一种：

response.setHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes("UTF-8"),"ISO-8859-1"));

第二种：

response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName,"UTF-8"));

尝试过之后前端获取仍然是乱码。（浏览器兼容问题自行解决）

2、解决

后来发现，仅仅修改后端代码是不行的，要前后端一起修改。
后端代码如下：

response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName,"UTF-8"));

前端代码如下：

 let contentDisposition = response.headers['content-disposition'];
 // fileName必用这种方式进行解析，否则乱码
 let fileName = window.decodeURI(contentDisposition.substring(contentDisposition.indexOf('=')+1));
 console.log('fileName=' + fileName);
 let url = window.URL.createObjectURL(new Blob([data]));
 let a = document.createElement('a');
 a.style.display = 'none';
 a.href = url;
 a.setAttribute('download',fileName);
 document.body.appendChild(a);
 //点击下载
 a.click();
 // 下载完成移除元素
 document.body.removeChild(a);
 // 释放掉blob对象
 window.URL.revokeObjectURL(url);
 console.log("下载完成");

注意，后端代码只能使用URLEncoder.encode来转编码（不能使用String来进行转编码），前端配合使用window.decodeURI来解码，任何一个不匹配都会造成乱码。

修改后效果如下：