如何解决前端下载zip文件时自动添加_后缀的问题?

Question

前端a标签下载.zip文件下载下来的文件加了_后缀怎么回事怎么解决？

export function downloadFile(data: any, fileName: string): void {
  const blob = data instanceof Blob ? data : new Blob([data]);
  console.log('blob', blob); // type: text/xml
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  console.log('fileName', fileName); // 取的content-disposition的文件名 xxxx.zip
  link.download = fileName;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}
// 下载的文件会带_ 变成_xxxx.zip_

Answer 1

已找到问题，是取文件名的时候，使用的是split('=')分割取的，文件名带有引号，使用decodeURIComponent()后引号消失了，但是解析出来是存在的

Answer 2

昨天刚好处理过了，网上有查到解决方法
前端js下载文件时后缀名多出一个下划线

如果可以的话，可以先在网上寻找解决方法，未找到再提问

link.download = fileName.replace(/"/g, '')

Answer 3

建议如下排查：

1. 先将代码正进如下改造：

export function downloadFile(data: any, fileName: string): void {
  const blob = data instanceof Blob ? data : new Blob([data]);
  console.log('blob', blob); // type: text/xml
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  console.log('fileName', fileName); // 取的content-disposition的文件名 xxxx.zip
  link.download = fileName;
//  link.style.display = 'none';
  document.body.appendChild(link);
//  link.click();
//  document.body.removeChild(link);
//  window.URL.revokeObjectURL(url);
}

此时 a 标签就会暴露出来，然后通过检查这个a链接的href是否是自己期待的。是与不是都可以把图截取上来，这样大家获取的信息就多了。

2. 如果a标签生成的没有问题，那么还可以从响应的header数据上着手看是否返回了自己想要的结果。

解决的方法是可以通过curl。复制a标签中的href，然后在终端中执行curl命令，并在参数中加入打印响应header -i。此时如果还是没有找到问题，再把截图发上了。

curl -i http://xxx.xx

其实很多问题出现后，是需要想办法搞明白中间状态的，这个中间状态是否与自己认为的相符很重要。

祝顺利