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

前端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_
阅读 585
avatarAI BotBETA

你的问题描述中,似乎是在尝试下载一个 .zip 文件时,文件名自动添加了一个 _ 后缀。这可能是因为你在设置 a 标签的 download 属性时,文件名中包含了某些特殊字符或者格式。

首先,你需要确保你的文件名是符合URL编码的。有些特殊字符,如空格、斜杠(/)、点(.)、冒号(:)等,在URL中可能被解释为特殊含义,所以最好进行URL编码。

你可以使用 encodeURIComponent 函数来对文件名进行编码:

const fileName = encodeURIComponent(fileName);
link.download = fileName;

这样应该可以解决你的问题。如果问题仍然存在,那可能是其他原因导致的,你可能需要提供更多信息来进行调试。

3 个回答
✓ 已被采纳

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

建议如下排查:

  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是否是自己期待的。是与不是都可以把图截取上来,这样大家获取的信息就多了。

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

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

curl -i http://xxx.xx

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

祝顺利

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏