动态创建＜a＞标签实现文件下载失败

本文链接：https://blog.csdn.net/LonlyTree/article/details/148195739

代码逻辑基本正确，但未实现文件下载的原因可能有以下几点：

🔍 常见原因及解决方案

原因	说明	解决方案
1. `ret.data` 返回的 URL 不是直接可下载地址	比如返回的是 HTML 页面或登录跳转链接，浏览器会打开该页面而不是下载文件。	确保后端返回的是一个真实的文件流地址或带有 `Content-Disposition: attachment` 的响应头。
2. 动态创建的 `<a>` 标签被浏览器拦截	如果 `link.click()` 是在异步回调中执行且没有用户交互上下文（如点击事件），某些浏览器会阻止自动下载。	确保 `click()` 是在用户主动触发的行为中执行（如按钮点击）。
3. 文件名编码问题导致下载失败	如果 `self.itemObj.Name` 包含中文或其他特殊字符，浏览器可能无法识别。	对文件名进行 URL 编码处理。
4. 浏览器兼容性问题	`download` 属性在某些浏览器（如微信内置浏览器）下不支持。	可尝试使用 `window.open(url)` 或提示用户手动点击下载。

✅ 修改建议

✅ 1. 确保 `ret.data` 是有效下载地址

console.log('下载地址:', ret.data); // 先确认输出的是否为真实文件地址

你可以复制该地址粘贴到新窗口中打开，看是否直接触发下载。

✅ 2. 对文件名进行编码处理

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

✅ 3. 添加错误日志和提示

if (!ret.status) {
  self.$toast("文件地址获取失败");
  return;
}

✅ 4. 完整优化后的代码如下：

const link = document.createElement("a");
link.href = ret.data;
// 处理文件名编码问题
link.download = encodeURIComponent(self.itemObj.Name);
document.body.appendChild(link);
link.click(); // 触发下载
document.body.removeChild(link);
console.log("下载成功");