Vue.js调用Node.js下载Zip文件时文件名出现异常下划线问题

嘿，我一眼就瞅出问题所在啦——你从响应头里提取文件名的时候，不小心把双引号也一起带进来了！

看你的响应头里的Content-Disposition字段：

Content-Disposition: attachment; filename="xmlFile.zip"

你用的正则/filename=(.*)/会把"xmlFile.zip"（包括前后的双引号）全匹配出来，当你把这个带引号的字符串赋值给link.download时，浏览器会把双引号当成文件名的一部分。但大部分操作系统不允许文件名里有双引号，所以浏览器自动把它们替换成了下划线，这就是你看到的“奇怪下划线包裹”的原因。

两种快速解决方法 #

方法1：精准匹配引号内的文件名 #

把正则改成/filename="(.*)"/，直接捕获引号里的内容，不会带引号：

const fileName = response.headers["content-disposition"].match(/filename="(.*)"/)[1];

方法2：手动清理引号 #

如果担心不同场景下响应头的格式可能有差异（比如有些服务器返回的文件名不带引号），可以在匹配后手动去掉所有引号：

const fileName = response.headers["content-disposition"].match(/filename=(.*)/)[1].replace(/["']/g, '');

额外优化建议 #

Axios默认会把响应数据当成JSON解析，下载二进制文件时最好加上responseType: 'blob'，这样能直接拿到Blob对象，不用自己再转一次，还能避免二进制数据损坏的风险：

// 修改请求配置，加上responseType
let response = await axios.post('/generateLoteXMLZIPConsulta', {}, { responseType: 'blob' });
let blob = response.data; // 直接使用响应返回的Blob
// 后面创建a标签下载的代码不变

修改完后，文件名就会正常显示成xmlFile.zip，再也不会有奇怪的下划线啦！

内容的提问来源于stack exchange，提问作者Luiz Alves