**目标:**我试图下载一些二进制数据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";
1条答案
按热度按时间ttcibm8c1#
这个问题基本上是JavaScript blob filename without link的重复-accepted answer建议使用FileSaver.js library,这是一个好主意。它没有这个问题。
深入研究FileSaver源代码以找出原因,我发现一个链接到issue 465的片段表明
link.click()
并不能在所有浏览器中工作。实际上,用link.dispatchEvent(new MouseEvent('click'))
替换它就解决了这个问题。至于为什么这发生在一些网站,而不是其他-这仍然是一个谜!🤯