Blob下载指定文件名失效：部分网站出现随机UUID文件名问题求助

问题概述 #

通过URL.createObjectURL生成Blob URL，结合<a>标签的download属性指定文件名（my-filename.ext）下载二进制数据时，在部分网站（如saga.org）上下载后的文件名会变成无扩展名的随机UUID，而非指定名称，但在多数网站（如stackoverflow.com）可正常工作。

可能原因 #

• 网站安全策略限制：部分网站的Content Security Policy（CSP）或页面脚本可能对Blob URL的下载行为做了拦截或修改，导致download属性失效。
• 属性设置顺序问题：先设置href再设置download的顺序，在部分页面环境中可能被浏览器忽略download属性。
• Blob元信息缺失：仅通过download属性指定文件名，未在Blob/File对象中携带文件名元数据，部分浏览器环境会优先使用Blob URL的UUID作为文件名。

修复方案 #

方案1：调整属性设置顺序+延迟触发 #

先设置download属性再赋值href，并添加微小延迟确保DOM元素就绪：

function do_download() {
  const link = document.createElement("a");
  // 优先设置下载文件名
  link.download = "my-filename.ext";
  link.href = create_blob_url();
  console.log('Loading URI: '+link.href);
  document.body.appendChild(link);
  // 延迟触发点击，避免DOM未完全渲染导致属性失效
  setTimeout(() => {
    link.click();
    link.remove();
  }, 10);
}

方案2：使用File对象替代Blob #

直接创建携带文件名的File对象，让浏览器优先读取File自带的文件名元数据：

function create_blob_url() {
  var hexdata = "a8c7390b9102c748609de9f817ab"; // arbitrary data
  var byteArray = new Uint8Array(hexdata.match(/.{2}/g).map(e => parseInt(e, 16)));
  // 创建File对象，直接指定文件名和类型
  var file = new File([byteArray], "my-filename.ext", {type: "application/octet-stream"});
  var url = window.URL.createObjectURL(file);
  return url;
}

function do_download() {
  const link = document.createElement("a");
  link.href = create_blob_url();
  link.download = "my-filename.ext";
  document.body.appendChild(link);
  link.click();
  link.remove();
}

方案3：用FileReader生成Data URL #

绕过Blob URL的安全限制，直接将二进制数据转为Data URL：

function create_data_url() {
  var hexdata = "a8c7390b9102c748609de9f817ab";
  var byteArray = new Uint8Array(hexdata.match(/.{2}/g).map(e => parseInt(e, 16)));
  var blob = new Blob([byteArray], {type: "application/octet-stream"});
  
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

async function do_download() {
  const link = document.createElement("a");
  link.download = "my-filename.ext";
  link.href = await create_data_url();
  document.body.appendChild(link);
  link.click();
  link.remove();
}

验证说明 #

优先推荐方案2，因为File对象自带的文件名元数据不受download属性失效的影响，兼容性最好，能在多数限制严格的网站环境中正常工作。

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