一、先说症状：

下载文件内容没有乱码，但是文件名乱码，且捕获的请求，响应头携带的也没有乱码，只有在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来解码，任何一个不匹配都会造成乱码。

修改后效果如下：