为什么要将blob下载链接附加到文档正文

Question

我正试图将一个表转换为csv文件，然后下载它，但在使用Blob下载csv文档时遇到了一个问题。我用来下载csv文件的代码片段是：

var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;        
document.body.appendChild(elem);
elem.click();        
document.body.removeChild(elem);

问题是csv文件没有以我指定的名称下载。它使用一个随机生成的名称，没有扩展名。下载后的文件名示例：43af43ac-7491-44ed-a779-a6c8f1972b1a。

我可以通过删除append((remove((函数来解决这个问题。因此，我有两个问题：

1-为什么会出现问题，最佳解决方案是什么？

2-为什么要将elem附加到HTML的主体？为什么代码在删除后仍然有效？

Answer 1

1-问题发生的原因

这是一个错误，我无法在macOS上的任何浏览器上重现。

，最佳解决方案是什么？

最好的解决方案是让您的浏览器供应商知道他们有错误，然后您可以尝试在调用document.body.removeChild(elem);之前添加延迟，这样(异步(下载就可以在您破坏元素之前真正开始
一种常见的做法是在执行此操作之前等待相当长的时间，这也是撤销您创建的blob://URL的好地方，否则GC将无法收集blob的数据，一旦您删除元素并丢失对URL的任何跟踪，就会导致真正的内存泄漏。

所以这会产生类似的东西

elem.click();        
setTimeout( () => {
document.body.removeChild(elem);
URL.revokeObjectURL(elem.href);
}, 1e4); // 10s should be enough in most cases

2-为什么要将elem附加到HTML的主体？

因为它曾经在某些浏览器(Firefox<70(中是必需的。

为什么代码在删除后仍然有效？

只有那些试图修复浏览器错误的人才能告诉你。