Chrome73+下JavaScript命名文件下载失败问题求助

我帮你定位到问题啦！你当前的代码直接把Blob对象传给了saveAs函数，但Chrome 73这类较新的浏览器版本无法直接将Blob作为a标签的href值，必须先把Blob转换成浏览器可识别的临时对象URL，这就是你遇到「Failed - no file」或者无下载反应的原因。

问题根源 #

Blob是内存中的二进制数据容器，本身不是可直接访问的URL地址。2019年后浏览器对资源加载的安全性要求提升，不再支持直接将Blob赋值给a标签的href，必须通过URL.createObjectURL()生成临时URL来中转。

修复后的完整代码 #

function saveAs(blob, filename) { 
  var link = document.createElement('a'); 
  // 将Blob转换为浏览器可识别的临时URL
  var objectUrl = URL.createObjectURL(blob);
  
  if (typeof link.download === 'string') { 
    document.body.appendChild(link); 
    link.download = filename; 
    link.href = objectUrl; 
    // 下载完成后释放临时URL，避免内存泄漏
    link.addEventListener('click', function() {
      setTimeout(() => {
        URL.revokeObjectURL(objectUrl);
      }, 100);
    });
    link.click(); 
    document.body.removeChild(link); 
    console.log("下载已触发");
  } else { 
    location.replace(objectUrl); 
    URL.revokeObjectURL(objectUrl);
  } 
} 

var name = 'myfile.xyz'; 
var data = {hello: "world"}; 
var blob = new Blob([JSON.stringify(data, null, 2)], {type : 'application/json;charset=utf-8'}); 
saveAs(blob, name);

关键修改点说明 #

• URL.createObjectURL(blob)：生成一个指向内存中Blob数据的临时URL，浏览器可以通过这个URL读取Blob内容
• URL.revokeObjectURL(objectUrl)：临时URL会占用浏览器内存，下载完成后主动释放可以避免内存泄漏，尤其是频繁下载的场景
• 延迟释放：设置100ms延迟是为了确保浏览器有足够时间处理下载请求，立即释放可能导致下载中断

这个修改在Chrome 73（Mac OS X）环境下可以正常触发下载，生成包含{hello: "world"}内容的myfile.xyz文件。

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