javascript 下载blob:URL ->文件名是随机UUID

lymnna71  于 2023-10-14  发布在  Java
关注(0)|答案(1)|浏览(128)

**目标:**我试图下载一些二进制数据Blob到用户的计算机作为一个特定的文件名(更重要的是,与一个特定的扩展名。)my-filename.ext
**设置:**我正在使用URL.createObjectURL创建一个blob: URL,并将其注入到<a href="blob:..." download="my-filename.ext">链接中。
**问题:**下载的文件名 * 有时 *(见下面的提示)是一个没有扩展名的随机UUID,而不是通过download属性指定的文件名。看我的Recent Downloads screenshot
**疯狂的线索:**在大多数网站上,例如。https://stackoverflow.com将此代码粘贴到开发控制台中可以工作,并且它将使用正确的文件名下载。但在一些网站上,包括https://saga.org,它失败了,下载一个随机的文件名。
代码片段:创建一个下载按钮,以my-filename.ext的形式下载一些随机数据-将其粘贴到dev控制台,然后单击下载按钮。

function create_blob_url() {
  var hexdata = "a8c7390b9102c748609de9f817ab"; // arbitrary data

  var byteArray = new Uint8Array(hexdata.match(/.{2}/g)
                                .map(e => parseInt(e, 16)));
  var blob = new Blob([byteArray], {type: "application/octet-stream"});
  var url = window.URL.createObjectURL(blob);
  return url;
}

function do_download() {
  const link = document.createElement("a");
  link.href = create_blob_url();
  console.log('Loading URI: '+link.href);
  link.download = "my-filename.ext";
  document.body.appendChild(link);
  link.click();
  link.remove();
}

var btn = document.createElement('button');
btn.innerText = 'Download';
document.body.appendChild(btn);
btn.addEventListener('click', do_download);
btn.style = "position:fixed;z-index:2147483647;top:0;left:0";
ttcibm8c

ttcibm8c1#

这个问题基本上是JavaScript blob filename without link的重复-accepted answer建议使用FileSaver.js library,这是一个好主意。它没有这个问题。
深入研究FileSaver源代码以找出原因,我发现一个链接到issue 465的片段表明link.click()并不能在所有浏览器中工作。实际上,用link.dispatchEvent(new MouseEvent('click'))替换它就解决了这个问题。
至于为什么这发生在一些网站,而不是其他-这仍然是一个谜!🤯

相关问题